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.
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
You can run the server locally with the following command:
yarn run dev -p 9000
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.
If you need to debug something inside the container, you can get a shell using:
docker-compose run --rm -u 0 nextjs sh
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.
- TypeScript Documentation - learn about TypeScript features.
- TypeScript Tutorial - assumes you know JavaScript already.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Next.js GitHub Repository
- Material UI Components - index of Material UI components.
- Getting Started with Material UI - learning resources for Material UI.
- Material UI GitHub Repository
- Cypress: Writing Your First Test - Get started with Cypress testing.
- Cypress GitHub Repository
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 |