Next.JS Boilerplate with Typescript and Redux Toolkit

A Next.JS Boilerplate in Typescript syntax with important libraries. This structure based on next-boilerplate.

Enhancements:

  • Added Material UI and removed Styled Component.
  • Added Cypress as e2e testing framework.
  • Added Atomic design structure (Atoms, Molecules, etc.).
  • Added Redux Toolkit (createSlice, createApi / RTK Query) and Redux Persist.
  • Added Internationalization config by Next.JS Internationalization and next-i18next, currently support [en, id]. example http://localhost/id or http://localhost/en. The default value is en.
  • Added form management with react-hook-form and yup library.
  • Moved _app/index.tsx, _document/index.tsx, _error/index.tsx, 404/index.tsx from folder to _app.tsx.
  • Updated all library to latest update (Next.JS v9 to v11, storybook, redux, etc).
  • Updated definition structure in service layer from multiple definition to single definition, example: Auth.d.ts.
  • Updated bundle analyzer setup to the latest way.
  • Removed Express JS.
  • Removed CLI Pankod.

About

Next.js is a minimalistic React framework that runs on the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating, it’s also a straightforward way for developers with React experience to get productive quickly.

The advantage of this approach is to be able to create rich user experiences in a uniform way, without compromising SEO (Search Engine Optimisation) factors that are key to good ranking on Google and other search engines.

This boilerplate makes it easier to get up and running with a well-structured Next.js and TypeScript application.

Features

this project provides a lot of features out of the box. Here’s an overview of the included components and tools.

Name Description
Next.JS Minimalistic framework for server-rendered React applications.
Storybook An open source tool for developing UI components in isolation for React.
Typescript Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
Redux A predictable state container for JavaScript apps with Redux Thunk and Redux Persist.
Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development
React Hook Form & Yup Form management
Material UI React components for faster and easier web development.
Docker A tool designed to make it easier to create, deploy, and run applications by using containers.
Babel The compiler for next generation JavaScript.
ESLint The pluggable linting utility.
Bundler Analyzer Visualize the size of webpack output files with an interactive zoomable treemap.
Jest Javascript testing framework , created by developers who created React.
React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices.
Cypress Javascript automation testing framework.
next-runtime-dotenv Expose environment variables to the runtime config of Next.js
next-i18next An internationalization-framework which returns the value for the current language.
Next Internationalization Supporting internationalization in next route

Branches

branch name Description
main Main branch with material UI Stable version
v5-material-ui Main branch with material UI v5 / @mui

Setup and Usages

Run this script npm install or yarn install and then to run this project npm run start:dev or yarn run start:dev.

This project provides somes scripts:

Script Description
npm run start Running this project in production environment.
npm run start:dev Running this project in development environment.
npm run start:doc Running this project as component documentation.
npm run start:analyze Analyzing existing bundle by bundle size visualization in the terminal.
npm run test:unit Running unit testing with Jest.
npm run test:e2e Running end to end testing with Cypress.

Recommended Visual Studio Extensions:

  • Jest
  • Jest Snippets
  • GitLens – Git supercharge
  • Prettier
  • JavaScript (ES6) code snippets
  • JavaScript and Typescript Nightly
  • ESLint
  • One Dar Pro (theme)
  • Material Icon Theme

Environment

Key Description Example value
NEXT_PUBLIC_API_URL API url http://192.168.1.3:8080
BUNDLE_ANALYZE Determine to open bundle visualization in browser or not true / false

Folder Structure

Folder Description
.storybook Storybook configuration
coverage Jest coverage result
cypress End to end testing folder
test/jest.setup.ts Jest setup before the test run
src/components Atomic design folder structure
src/definitions Constants
src/interface Interfaces
src/redux/store.ts Redux store setup
src/redux/modules Redux modules
src/redux/modules/index.ts Exporting combine reducer and middleware
src/redux/modules/{name}/index.ts Exporting all export file in this folder
src/redux/modules/{name}/{name}.consts.ts Redux Module Constants for reducer path and name
src/redux/modules/{name}/{name}.d.ts Redux Module interfaces
src/redux/modules/{name}/{name}.query.ts Redux Module RTK Query
src/redux/modules/{name}/{name}.slice.ts Redux Module RTK Slice / Reducer

Rules

Generals

  • The import local component/library should be with alias path (use @ReduxModules/Counter instead of ../src/Redux/Modules/Counter), here is available alias path:

    Alias Path Description
    @Atoms To access atoms directory which inside component
    @Molecules To access molecules directory inside component
    @Organisms To access organisms directory inside component
    @Definitions To access definitions directory inside src
    @Interfaces To access interfaces directory inside src
    @Pages To access pages directory
    @Redux To access redux directory
    @ReduxModules To access redux/modules directory
    @Static To access public/static directory

  • The imported library should be pyramid sorted and also grouped by:

    Order Number Import Area Description
    1 Import external library here
    2 Import local component here
    3 Import redux family here
    4 Import util/helper/etc function here
    5 Import Interface here

Components

  • Component should be writed in functional component
  • A function in functional component should be wrapped by useCallback to prevent a useless instantiation
  • A function has expensive calculation should be wrapped by useMemo to prevent a useless calculation
  • Functional component should be exported with React.memo to prevent a useless rendering
  • the interface should exist in a functional component to register incoming props.
  • Every component should have snapshot testing
  • Every new component shoud have property data-testid with prefix typescript validation, example: data-testid=button-login

GitHub

View Github