Next.JS Boilerplate

This is an opinionated Next.js boilerplate, with:

• Fully typed with TypeScript.
• Style/Theme engine and Icons from Material UI.
• Code style is enforced by React ESLint rules.
• End-to-End Testing with Cypress.

Getting Started

First-Time Setup

If this is your first time using NodeJS, you'll need to install Yarn to use this project:

(You only need to do this once per system you develop on.)

npm install -g yarn

Then, we can clone the repository into a path of your choosing:

git clone https://github.com/Rethunk-Tech/nextjs-boilerplate.git project-name
cd project-name

Finally, install the dependencies using yarn.

cd project-name
yarn install

Running the Dev Server

You can run the server locally with the following command:

yarn run dev -p 9000

With Docker

Or, you can use Docker to run the server within containers:

1. Install Docker Compose

2. Enable BuildKit for Docker. (It's faster and has cache.)

3. "Up" the composition (specifying --build to force a re-build):

   docker-compose up --build

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

Debugging

If you need to debug something inside the container, you can get a shell using:

docker-compose run --rm -u 0 nextjs sh

Developing with this Boilerplate

First, open http://localhost:9000/ in a browser, and open pages/index.tsx in your preferred editor. Side-by-side the windows as shown below for the most convenient developing experience! (Even better with more monitors.)

Any changes made to a file in pages will automatically update in the browser as long as the dev server is running.

You can start editing the page by modifying pages/index.tsx.

API routes can be accessed on http://localhost:9000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

TypeScript

• TypeScript Documentation - learn about TypeScript features.
• TypeScript Tutorial - assumes you know JavaScript already.

Next.JS

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

Material UI

• Material UI Components - index of Material UI components.
• Getting Started with Material UI - learning resources for Material UI.
• Material UI GitHub Repository

Cypress E2E Testing

• Cypress: Writing Your First Test - Get started with Cypress testing.
• Cypress GitHub Repository

Contributing

Consider using Gitmoji in your commit messages.

Here are some we use:

	Code	Meaning
🐛	:bug:	Fix a bug
💚	:green_heart:	Fix CI Build
🚨	:rotating_light:	Fix linter warnings
⚡	:zap:	Improve performance
✨	:sparkles:	Introduce new feature
♻️	:recycle:	Refactor code
🔥	:fire:	Remove code or files
🙈	:see_no_evil:	Update a .gitignore file
👷	:construction_worker:	Update CI build system
💡	:bulb:	Update comments in code
📝	:memo:	Update documentation
⬆️	:arrow_up:	Upgrade dependency