NextJS Boilerplate

NextJS Boilerplate is an open-source React starter kit that scaffolds a server-side rendered Next.js application with Storybook, Styled Components, GraphQL/Apollo, Jest, React Testing Library, and Cypress preconfigured.

What is NextJS Boilerplate?

This template is a starting point for building React applications with Next.js, providing server-side rendering out of the box. It takes a fresh clone of a repository and produces a development environment with a working homepage at http://localhost:3000, along with test and build tooling. The project is authored by ahmetkapusuz and is marked as work in progress.

Key Features

• Next.js — Server-side rendered React framework with file-based routing; the app builds into a .next folder for production.
• Storybook — Component development environment started with yarn storybook, allowing isolated UI component testing.
• Styled Components — CSS-in-JS styling integration for component-scoped styles.
• GraphQL / Apollo — Client-side GraphQL data layer with Apollo for state and API data management.
• Jest / React Testing Library — Unit and integration testing setup executed with yarn test.
• Cypress — End-to-end testing framework with commands to open the runner (yarn run cypress:open) or run all tests headlessly (yarn run cypress:run).

Who is it for?

• React developers starting new SSR projects who want a preconfigured toolchain instead of wiring up Webpack, Babel, and testing libraries manually.
• Frontend teams adopting Storybook for component-driven development who need a working setup integrated with a Next.js app.
• Developers learning GraphQL who want to see Apollo Client integrated with Next.js in a minimal boilerplate.
• Teams practicing test-driven development who need Jest, React Testing Library, and Cypress configured from the first commit.

What can you do with NextJS Boilerplate?

• Kick-start a production-ready app: Clone the repository, run yarn and yarn dev, then start editing pages in the Next.js project while all testing tools remain active.
• Build and deploy: Use yarn build to create a production bundle in the .next folder and yarn start to serve it in production mode.
• Develop UI components in isolation: Run yarn storybook to develop and document components without spinning up the full app.

How does NextJS Boilerplate work?

1. Clone the repository using git clone https://github.com/ahmetkapusuz/next-js-boilerplate.git.
2. Install dependencies with yarn or npm install.
3. Run yarn dev or npm run dev to start the development server and open http://localhost:3000.
4. Use yarn test, yarn build, and yarn start for the corresponding workflows.

Note that the project is currently marked as "WORK IN PROGRESS", so some parts may change.