Awesome Open Source
Awesome Open Source

NextJS Boilerplate

An opinionated boilerplate to kickstart projects using NextJS

Features

  • Next 11
  • React 17
  • 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 and redux-thunk

Variation branches

Custom server

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Enzyme

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

No redux

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Getting started

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

Development

Once all dependencies have been installed you can start development. To start a development server on http://localhost:3000 run:

$ npm run dev

Production

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

Static

You can export your application to a static website as well:

npm run export

This will render static HTML pages into ./out

Linters

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

Tests

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

Modules

TypeScript

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'

SCSS

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';

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (252,216
Reactjs (72,739
Scss (17,302
Redux (13,067
Nextjs (6,527
Boilerplate (5,528
Jest (3,545
Static Site (1,511
Prettier (1,466
Css Modules (546
Stylelint (545
Husky (313
Safety (207
Testing Library (175
Related Projects