@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.
- In root of project create .env file (dot is necessary in start of filename).
- Added line with your GraphQL API endpoint address e.g. API_ENDPOINT=https://api.prisma-cms.com
- Generate front GraphQL schema and types
yarn generate:types
- 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).