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, run the development server:
yarn run dev -p 9000
Open http://localhost:9000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
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 |