React + GraphQL + Next.js + Apollo + Scss + Typescript Starter is a free, MIT-licensed full-stack boilerplate for building Next.js applications with a TypeScript-based GraphQL backend, Apollo Client on the frontend, SCSS styling, and a preconfigured development environment. The template takes a fresh project scaffold and produces a working full-stack application that you can run with two npm commands.
What is the React + GraphQL + Next.js + Apollo + Scss + Typescript Starter?
This starter is a project bootstrap for full-stack JavaScript development. It combines Next.js 12.0.4 with React 17.0.2, TypeScript 4.5.2, Apollo, GraphQL 15.5.5, and SCSS into a single repository. It is published under the MIT license on the codica2 GitHub account. The repository includes both client and server code, so you can write a GraphQL API and consume it from the same Next.js application.
Key Features
- Full-stack Next.js architecture — Next.js 12.0.4 serves the React frontend and hosts the GraphQL server, so one codebase covers both.
- Apollo + GraphQL 15.5.5 — Apollo Client handles data fetching on the frontend, and GraphQL 15.5.5 defines the query syntax for the API.
- TypeScript 4.5.2 everywhere — Shared TypeScript types across client and server reduce mismatches and improve developer tooling.
- SCSS styling — Styles are written in SCSS rather than plain CSS, giving you variables, nesting, and mixins out of the box.
- ESLint and Prettier — Linting and formatting are configured as a starting point; you can change the rules to match your team's standards.
- Jest test runner — Jest is included for writing unit and integration tests for both client and server code.
- Nodemon for server development — Nodemon automatically restarts the Node server when server-side files change, speeding up dev iteration.
- TypeGraphQL and Typegoose — TypeGraphQL builds the GraphQL schema from TypeScript classes, and Typegoose provides Mongoose models with TypeScript decorators.
Who should use this starter?
- Full-stack JavaScript developers who want to skip configuration and start building features immediately on a Next.js + GraphQL stack.
- GraphQL learners working with a real Apollo + GraphQL example that is intentionally minimal and easy to explore.
- Teams setting up a new project that need a preconfigured ESLint, Prettier, and Jest setup they can adjust to their own conventions.
What can you do with this starter?
- Scaffold a new full-stack app: after cloning, run
npm iandnpm run devto get a React frontend and GraphQL server running locally. - Build a TypeGraphQL API: define your schema using TypeScript classes and decorators, with type safety carried through to the client.
- Use environment variables on client and server: access values through process.env in both environments, and remember to restart the server after editing your .env file.
- Customize linting and formatting: modify the included ESLint, Prettier, and TypeScript configuration to fit your project's style.
How does this starter work?
The README defines a simple two-step workflow: install dependencies with npm i, then start development with npm run dev. Environment variables are read from a .env file through process.env on both client and server, but you must reboot the server when the file changes. For deeper guidance, the README links to the merge-graphql-schemas library for GraphQL schema organization, a context management video, and Apollo's documentation on local state.
FAQ
Is the starter free?
Yes, the repository is licensed under the MIT license, so you can use, modify, and distribute it freely for personal or commercial projects.
What versions of React and Next.js does it use?
The badge in the README lists React 17.0.2, Next.js 12.0.4, TypeScript 4.5.2, and GraphQL 15.5.5. These are the versions pinned at the time the README was published.
How do I use environment variables?
The README says you can access .env variables by destructuring the process.env object on both the client and server. You need to reboot the server after updating the .env file.
Can I change the configuration?
Yes, the README explicitly states that configuration files for ESLint, TypeScript, Prettier, and similar tools are the author's own preference, and you are encouraged to adjust them to suit your project.
