This is a very simple boilerplate made with Next.js and GraphQL Request to start small projects with GraphQL.

View Demo

What is inside?

This project uses lot of stuff as:

• TypeScript
• NextJS
• GraphQL Request
• Styled Components
• Jest
• React Testing Library
• Storybook
• Eslint
• Prettier
• Husky

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Working with GraphQL

In order to work with GraphQL we have two variables that you need to define in your .env. Those are:

• GRAPHQL_HOST: your GraphQL API url
• GRAPHQL_TOKEN: your token if the API needs authentication

If you need to use authentication, just edit the [src/graphql/client.ts] to use the token part. After that, you're ready to go!

How to generate your GraphQL Types

We use the amazing graphql-codegen to generate our types based on the API. All you have to do is:

• Define your API inside the codegen.yml file
• Run yarn codegen and that's it! All your generated types will be inside src/graphql/generated folder.

Commands

• dev: runs your application on localhost:3000
• build: creates the production build version
• start: starts a simple server with the build production code
• codegen: creates the graphql generated types based in your API
• lint: runs the linter in all components and pages
• test: runs jest to test all components and pages
• test:watch: runs jest in watch mode
• storybook: runs storybook on localhost:6006
• build-storybook: create the build version of storybook

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.