Next js boilerplate

Tech stack

• based on Next.js. Usage of Next.js comes with many benefits such as server side rendering out of the box, bundle optimization etc.
• uses typescript
• uses Prettier for formatting and keeping prescribed code style
• uses combination of global sass styles and localy encapsulated styled-jsx styles.
• uses PostCSS modules autoprefixer and postcss-css-variables
• uses Redux for state management and redux-thunk as redux middleware for async actions
• uses @PabloSzx/tsconfig-paths-webpack-plugin to support absolute import paths
• uses TSLint and Stylelint for code quality checks
• uses Webpack Bundle Analyzer for analyzing bundled libraries sizes
• uses Jest for testing
• uses Express as custom server and compression as compression middleware

Conventions

This project follows pattern of dividing components between Presentational and Container Components as described in Dan Abramov's article thus Components connected to Redux store are placed inside '/src/containers' and simple components live inside '/src/components'

Start

Development

Start development with

npm run dev

or

yarn dev

Production

For building production version run

npm run build

or

yarn build

For starting the server in production mode run

npm run start

or

yarn start

Linting

Typescript

Typescript linting done with TSLint

npm run lint-ts

Styles

Styles linting done with Stylelint

npm run lint-styles

Testing

Testing done via Jest

npm run test

Used Libraries

Simplify module imports with absolute paths

Together with typescript and Next.js is working good this plugin https://github.com/PabloSzx/Next-TypeScript-Paths

• Support baseUrl in tsconfig issue

ENV Variables

Done using dotenv plugin