Boilerplate or Starter Template for Next.JS

Production boilerplate/template to develop nextjs application 🛠️🎉. Next.js App Directory + TypeScript + ESLint + Prettier + Husky + Jest + Testing Library + Cypress + Storybook + Commitlint + VSCode + Tailwind CSS + Redux Tookit + RTK Query.

Click "Use this template" to use this template and getting the updates

Features

Developer experience first:

⚡ Next.js with App Router
🔥 Type checking TypeScript
💎 Tailwind CSS to develop the UI
🎉 Storybook for UI documentation
🦺 Unit Testing with Jest and React Testing Library
🧪 E2E Testing with Cypress
🗺️ Support multi language
✅ Strict Mode for TypeScript and React 18
📏 Linter with ESLint (default NextJS, NextJS Core Web Vitals, Eslint testing library, JS Doc, Import/Export)
💖 Code Formatter with Prettier
🦊 Husky for Git Hooks
🚓 Lint git commit with Commitlint
🗂 VSCode configuration: ESLint, Prettier

Built-in feature from Next.js:
💡 Absolute Imports using @ prefix
☕ Minify HTML & CSS
💨 Live reload
✅ Cache busting
🗺️ Sitemap.xml and robots.txt with next-sitemap

Installed Packages

Category	Context	Package Name	Status
UI	UI CSS Support	Tailwind	✅
State	State Management	Redux Toolkit and Redux Persist	✅
State	Data Fetching and Caching Tool	RTK Query	✅
Doc	Component Documentation	Storybook	✅
Rules	GitHub - Commit Rules	Husky with Commitlint and ConventionCommit	✅
Rules	Eslint - Auto Sort Import	Eslint auto import	✅
Rules	Eslint - Data Test ID format	Eslint plugin testing library	✅
Rules	Eslint - Require JSDoc	Eslint plugin JS Doc	✅
Rules	Eslint - Export Rules	Eslint plugin import	✅
Testing	Unit Testing	Jest	✅
Testing	Component Testing	Jest and React Testing Library	✅
Testing	Automation Testing	Cycpress	✅
I18n	Internationalization	Language based on route e.g. /en, /id. in server with async and client with context and custom hooks useTranslation	✅
Analytic	Analytic	Google Analytic	✅
PWA	Progressive Web Apps	🛠️	🛠️

Getting Started

Install the dependency and trigger husky

npm install && npm prepare

Run the project

npm run dev

Environments

Name	Description
NODE_ENV	e.g. production, development
NEXT_PUBLIC_API_BASE_URL	e.g. https://dummyjson.com
NEXT_PUBLIC_WEB_BASE_URL	e.g. https://didikmulyadi.com
NEXT_PUBLIC_GOOGLE_ANALYTIC_MEASUREMENT_ID	e.g. G-XXXXXXX

Rules

Commit

By default, you will got an error when the commit format is wrong. See the rules commitlint.config.js

Eslint

We implement the eslint to enforce React best practice is applied in the project. The config stored in eslintrc.json

1. For the import rules, check "simple-import-sort/imports" from rules
2. For the test id format, check "testing-library/consistent-data-testid" from rules

❌ input__email#
✅ input__email
✅ button__login
✅ list__user
✅ item__user1

3. For the boolean props name, check "react/boolean-prop-naming" from rules

❌ enabled
✅ isEnabled
✅ hasItem

4. For the component function type, check "react/function-component-definition" from rules

❌ function Component() {
    return (
        ...
    )
}
✅ const Component = () => {
    return (
        ...
    )
}

3. For the JS Doc, every interface or function should have a js-doc, check "jsdoc/require-jsdoc" from rules

/**
 * Used to store the main data after logged-in
 */
export interface IUserSlice {
  /**
   * User name
   */
  name: string
  /**
   * Authorization token
   */
  token: string
}

4. For the export, we will throw you an error when the export is unused. check "import/no-unused-modules" from rules. This rules is disabled for spesific path, the configuration is stored in .eslintrc.json

  "overrides": [
    {
      "files": [
        "./src/app/**/*.ts",
        "./src/redux/modules/**/*.api.ts",
        "./src/redux/modules/**/*.slice.ts",
        "./src/component/**/*.stories.ts"
      ],
      "rules": {
        "import/no-unused-modules": "off"
      }
    }
  ],

5. For the export should be in the last of the code. check "import/exports-last" from rules.

Project Structure

nextjs-advance
├─ .env.example
├─ .eslintrc.json
├─ .gitignore
├─ .husky
│  ├─ commit-msg
│  └─ _
│     ├─ .gitignore
│     └─ husky.sh
├─ .huskyrc
├─ .prettierrc.json
├─ .storybook
│  ├─ main.ts
│  └─ preview.ts
├─ .swc
│  └─ plugins
│     └─ v7_windows_x86_64_0.98.5
├─ .vscode
│  └─ settings.json
├─ commitlint.config.js
├─ cypress
│  ├─ downloads
│  ├─ e2e
│  │  └─ app.cy.ts
│  ├─ fixtures
│  │  └─ example.json
│  ├─ support
│  │  ├─ commands.ts
│  │  ├─ component-index.html
│  │  ├─ component.ts
│  │  └─ e2e.ts
│  └─ tsconfig.json
├─ cypress.config.ts
├─ jest.config.js
├─ jest.setup.js
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ public
│  ├─ next.svg
│  └─ vercel.svg
├─ README.md
├─ src
│  ├─ app
│  │  ├─ favicon.ico
│  │  ├─ globals.css
│  │  ├─ robots.ts
│  │  ├─ sitemap.ts
│  │  └─ [lang]
│  │     ├─ about
│  │     │  ├─ page.client.tsx
│  │     │  └─ page.tsx
│  │     ├─ layout.tsx
│  │     └─ page.tsx
│  ├─ component
│  │  ├─ button
│  │  │  ├─ button.css
│  │  │  ├─ button.stories.ts
│  │  │  ├─ button.test.tsx
│  │  │  ├─ button.tsx
│  │  │  └─ __snapshots__
│  │  │     └─ button.test.tsx.snap
│  │  └─ layouts
│  ├─ config
│  │  └─ env.ts
│  ├─ i18n
│  │  ├─ dictionaries
│  │  │  ├─ en.ts
│  │  │  ├─ id.ts
│  │  │  └─ index.ts
│  │  ├─ index.tsx
│  │  └─ type.ts
│  ├─ middleware.ts
│  ├─ redux
│  │  ├─ libs.tsx
│  │  ├─ modules
│  │  │  ├─ index.ts
│  │  │  └─ user
│  │  │     ├─ user.api.ts
│  │  │     ├─ user.slice.ts
│  │  │     ├─ user.type.reqres.ts
│  │  │     └─ user.type.ts
│  │  └─ store.ts
│  └─ types
│     └─ common.ts
├─ tailwind.config.js
└─ tsconfig.json

Guide

Internationalization / Translation

Add new language

1. Create a file in /src/i18n/dictionaries/[lang].ts e.g. ch.ts
2. Add your new language in /src/i18n/dictionaries/index.ts

const dictionaries = {
  ...
  ch: () => import('./ch').then((module) => module.default),
}

export const i18n = {
  ...
  locales: [..., 'ch'],
} as const

Add new content in dictionary

1. Add your new content in dictionary type /src/i18n/type.ts, it will require you to update the dictionary in existing language
2. Open the existing dictionary /src/i18n/dictionaries/{en|id}.ts, add your content

Access translation in the server

const About = async ({ params }: INextPage) => {
  const t = await getTranslation(params.lang)

  return (
    ...
  )

Access translation in the client

1. Define the translation in the server
2. Wrap your page component with translation

// src/app/[lang]/about/page.tsx
const About = async ({ params }: INextPage) => {
  const t = await getTranslation(params.lang)

  return (
    <TranslationProvider translation={t}>
      <AboutPage />
    </TranslationProvider>
  )

3. Access the translation with custom hooks useTranslation

// src/app/[lang]/about/page.client.tsx
export const AboutPage = () => {
  const t = useTranslation()
  const tAbout = t.about

  return (
    <div>{tAbout['DICTIONARY_KEY']}</div>
  )
}

Remove Package Guide

Remove Material UI Guide

TBD

Remove Tailwind UI Guide

TBD

Remove Eslint Auto Import Rules

1. run npm uninstall eslint-plugin-simple-import-sort
2. remove "simple-import-sort" from plugins in eslintrc.json
3. remove "simple-import-sort/imports" from rules in eslintrc.json

Remove Eslint Testing Library

1. run npm uninstall eslint-plugin-testing-library
2. remove ""testing-library"" from plugins in eslintrc.json
3. remove "testing-library/*" from rules in eslintrc.json

Remove Eslint JS Doc

1. run npm uninstall eslint-plugin-jsdoc
2. remove ""js-doc"" from plugins in eslintrc.json
3. remove "jsdoc/*" from rules in eslintrc.json

Remove Export Rules

1. run npm uninstall eslint-plugin-import
2. remove ""import"" from plugins in eslintrc.json
3. remove "import/no-unused-modules" from rules in eslintrc.json
4. remove "import/exports-last" from rules in eslintrc.json