This is a very simple boilerplate made with Next.js and GraphQL Request to start small projects with GraphQL.
This project uses lot of stuff as:
- TypeScript
- NextJS
- GraphQL Request
- Styled Components
- Jest
- React Testing Library
- Storybook
- Eslint
- Prettier
- Husky
First, run the development server:
npm run dev
# or
yarn devOpen 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.
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 urlGRAPHQL_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!
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 codegenand that's it! All your generated types will be inside src/graphql/generated folder.
dev: runs your application onlocalhost:3000build: creates the production build versionstart: starts a simple server with the build production codecodegen: creates the graphql generated types based in your APIlint: runs the linter in all components and pagestest: runs jest to test all components and pagestest:watch: runs jest in watch modestorybook: runs storybook onlocalhost:6006build-storybook: create the build version of storybook
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!
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.