August 11, 2023

Sample movie app using NextJS and TMDB as an API

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 | | ------------------- | -------------------------------------------------------- | ----------------------- | | NEXTPUBLICAPIURL | API url | http://192.168.1.3:8080 | | BUNDLEANALYZE | 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
View Github