Skip to content

Latest commit

 

History

History
353 lines (289 loc) · 12.4 KB

README.md

File metadata and controls

353 lines (289 loc) · 12.4 KB
Raw

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
  1. For the boolean props name, check "react/boolean-prop-naming" from rules
❌ enabled
✅ isEnabled
✅ hasItem
  1. For the component function type, check "react/function-component-definition" from rules
❌ function Component() {
    return (
        ...
    )
}
✅ const Component = () => {
    return (
        ...
    )
}
  1. 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
}
  1. 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"
      }
    }
  ],
  1. 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>
  )
  1. 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