@prisma-cms/nextjs Typescript Boilerplate

Based on

• https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest
• https://github.com/vercel/next.js/tree/canary/examples/with-apollo
• https://github.com/vercel/next.js/tree/canary/examples/custom-server-typescript

Bootstrap a developer-friendly NextJS app configured with:

• Support custom GraphQL API endpoints.
• Frontend GraphQL API schema and types generation.
• SASS/SCSS and styled-components.
• Typescript and server
• Linting with ESLint
• Storybook
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks
• Testing with Jest and react-testing-library

Deploy your own

Deploy the example using Vercel:

How to use

# Clone project
git clone https://github.com/prisma-cms/nextjs.git

# Install dependencies
yarn install

# Build bundles
yarn build

# Start bundled project
yarn start

Development

@prisma-cms/nextjs support custom GrapghQL API endpoints. By default used https://nextjs-graphql-with-prisma-simple.vercel.app/api.

1. In root of project create .env file (dot is necessary in start of filename).
2. Added line with your GraphQL API endpoint address e.g. API_ENDPOINT=https://api.prisma-cms.com
3. Generate front GraphQL schema and types

yarn generate:types

4. Start server in development mode

yarn dev

Tests

Eslint

yarn lint

Typescript types checking

yarn types

Jest unit tests

yarn test

Test code coverage

yarn test --coverage

Jest unit tests real API

Attension! For unit tests with real API started server required.

# Build bundles
yarn build

# Start bundled project
yarn start

After this open yet another terminal and run tests

yarn test:api

Run all test

yarn test:all

Analyze bundles

yarn build:analyze

Storybook

dev

yarn storybook

build storybook

yarn build:storybook

Deploy it to the cloud with Vercel (Documentation).