Modular Next.js Boilerplate

Features

• Static type checking with TypeScript
• Tailwind CSS integrated
• Unit Test using Jest and React Testing Library
• End-to-end (E2E) automated tests (thanks to Cypress)
• SEO metadata, JSON-LD and Open Graph tags with Next SEO
• Run Linter with ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
• Follow Conventional Commits (thanks to Commitizen and Commitlint)
• Absolute Imports using @ prefix
• Tunnel to make your local development accessible online (thanks to ngrok)
• Bundle analysis, to know which dependencies take the most space in your JS bundle
• Powerful asynchronous state management & data fetching tools (thanks to React Query)
• Internationalisation (i18n) (thanks to next-i18next)
• Strong observability of the system (monitoring) and push-notification when things go wrong (thanks to Sentry)
• Fine-grained frontend analytics (thanks to Mixpanel)
• Control and personalize your app on the fly (thanks to Firebase Remote Config)

Requirements

• Node.js 16+ and yarn

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/DhimasYulian/supernova.git my-project-name
cd my-project-name
yarn install

Then, you can run locally in development mode with live reload:

yarn dev

Open http://localhost:3000 with your favorite browser to see your project.

Folder Structure

$PROJECT_ROOT
├── public
└── src
    ├── common                                        
    │   ├── components
    │   │   └── [ComponentName]
    │   │       ├── index.tsx
    │   │       └── index.module.scss
    │   ├── contexts
    │   │   └── [ContextName]Context.tsx
    │   ├── constants
    │   │   └── [constantName].ts
    │   ├── hooks
    │   │   ├── mutations
    │   │   │   └── use[MutationName]Mutation.tsx
    │   │   ├── queries
    │   │   │   └── use[QueryName]Query.tsx
    │   │   └── use[HookName].tsx
    │   ├── templates
    │   │   └── [TemplateName]
    │   │       ├── index.tsx
    │   │       └── index.module.scss
    │   ├── utils
    │   │   └── [utilsName].ts
    │   ├── types
    │   │   └── [typeName].ts
    │   ├── services
    │   │   └── [ServiceName].ts
    │   └── styles
    │       └── [styleName].scss
    ├── modules
    │   └── [module-name]
    │       ├── components
    │       │   └── [ComponentName]
    │       │       ├── index.tsx
    │       │       └── index.module.scss
    │       ├── contexts
    │       │   └── [ContextName]Context.tsx
    │       ├── constants
    │       │   └── [constantName].ts
    │       ├── hooks
    │       │   ├── mutations
    │       │   │   └── use[MutationName]Mutation.tsx
    │       │   ├── queries
    │       │   │   └── use[QueryName]Query.tsx
    │       │   └── use[HookName].tsx
    │       ├── templates
    │       │   └── [TemplateName]
    │       │       ├── index.tsx
    │       │       └── index.module.scss
    │       ├── utils
    │       │   └── [utilsName].ts
    │       ├── types
    │       │   └── [typeName].ts
    │       └── services
    │           └── [ServiceName].ts
    ├── pages
    │   ├── [api]
    │   │   └── [api-name]
    │   │       └── index.tsx
    │   ├── [page-name]
    │   │   ├── index.tsx
    │   │   └── index.module.scss
    │   ├── _app.tsx
    │   ├── _document.tsx
    │   ├── _error.tsx
    │   ├── 404.tsx
    │   └── index.tsx
    └── middleware.ts