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:

Install Docker Compose
Enable BuildKit for Docker. (It's faster and has cache.)
"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

rethunk-tech / nextjs-boilerplate Goto Github PK