An opinionated boilerplate to kickstart projects using NextJS
Features
- ππΌ Next 13
- βοΈ React 18
- π Custom Document and App
- β¨οΈ Type safety using TypeScript in strict mode
- π Write SCSS & future CSS with PostCSS + preset-env
- π SVG sprite for icons
- π Lint your code with ESLint & Stylelint
- π Prettier for consistent code style
- π¨ Jest + Testing Library for tests
- βοΈ Husky + lint-staged for code quality assurance
- βοΈ Editorconfig file for consistent indents
- π Redux with
react-redux
andredux-thunk
Before you can start developing your awesome application you need to install the project's dependencies. Make sure you have Node (>= 10.13.0) and NPM installed and run:
$ npm install
Once all dependencies have been installed you can start development. To start a development server on http://localhost:3000 run:
$ npm run dev
To run your application in production make sure to run a build first:
$ npm run build
And then start you application with a provided port number (defaults to 3000 if not provided):
$ PORT=8080 npm run start
You can export your application to a static website as well:
npm run export
This will render static HTML pages into ./out
The boilerplate provides a couple of linters to help you keep an eye on code consistency and type safety. There are three linters: one for CSS, one for TypeScript and one for type safety. You can use each of them separately using the following commands:
$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types
TIP: To get the most out of your linters install the corresponding (Stylelint, TSLint) plugins for your editor or IDE
Prettier
Prettier helps you to enforce consistent (opinionated) code style. If possible, you can tell your editor to format you code when you save a file. If you are not able to do this, you can run prettier manually using:
$ npm run prettier
You can write your tests using Jest and Enzyme. You can run all test with the following command
$ npm run test
If you want to follow test driven development you can use:
$ npm run test:dev
TypeScript and Babel are pre-configured with custom module resolvers. This means you can use absolute imports with custom namespaces by default for the following modules:
/* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'
By default the path ./src/common/css
is configured as an included path for our scss loader.
This means you can import any of this folder's files directly without the relative or absolute path:
@import 'variables';
@import 'colors';