NEXT-APP-BOILERPLATE

Welcome to my all-in-one Next.js project with app router!

Features

• ⚡ Next.js with App Router support
• 🔥 Type checking TypeScript
• 💎 Integrate with Tailwind CSS
• 🖼️ Navigate animation with next-view-transitions
• 🧰 Statem management with Valtio and React Query
• ✅ Strict Mode for TypeScript and React 18
• 📏 Linter with ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 🧪 E2E Testing with Playwright
• 💡 Absolute Imports using @ prefix
• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest
• 🤖 SEO metadata with Next generateMetadata
• ⚙️ Bundler Analyzer
• 💯 Maximize lighthouse score

Use the template with create-next-app

To create a new project based on this template using create-next-app, run the following command:

npx create-next-app -e https://github.com/chongruei/nextjs-app-boilerplate

Requirements

• Node.js >=20.0.0 and pnpm

Getting started

To install the dependencies, run the following command:

pnpm install

Local Configuration

Before starting the development server, make sure to add the local configuration file .env.local with the following content:

# GENERATE_SOURCEMAP=false
NEXT_PUBLIC_VERSION=$npm_package_version
NEXT_PUBLIC_ENV=production
NEXT_PUBLIC_ENV_NAME=local

Start Development Server

To start the development server, use the following command:

pnpm dev

Open http://localhost:3000 in your browser to see the application. You can edit the pages by modifying the corresponding files in the src/app directory. The changes will be automatically updated in the browser.

Start Production Server

To start the production server, follow these steps:

pnpm build
pnpm start

Run Playwright testings

To install the Playwright, run the following command:

pnpm exec playwright install

and

pnpm test

Bundle Analyzer

To analyze the bundle size, run the following command:

ANALYZE=true pnpm build

Docker Commands

To build and run the application using Docker, you can use the following commands:

docker-compose -f docker-compose.yml build
docker-compose -f docker-compose.yml up

VSCode Developer Setup

To get started with development in Visual Studio Code, open the workspace file named nextjs-app-router-boilerplate.code-workspace.

We recommend installing the following extensions for a better development experience:

• Auto Import
• ESLint
• GitLens
• Import Cost
• Prettier
• Tabnine AI Autocomplete
• Tailwind CSS IntelliSense
• Console Ninja

For Console Ninja, add the following settings to your settings.json file in VSCode:

{
  "console-ninja.toolsToEnableSupportAutomaticallyFor": {
    "live-server-extension": true,
    "live-preview-extension": true
  },
  "console-ninja.allowedHosts": ["localhost:3000", "localhost"]
}

Project Structure

Here's an overview of the project structure:

- public
  - assets
- src
  - app
  - components
    - layout
  - hooks
  - model
  - services
  - styles
  - script
  - config
  - utils
  - store

Development Rules

File Naming

• Use camel case for file names.

Creating New Pages

To create a new page, follow this structure:

📁 nextjs-app-router-boilerplate
    📁 app
        💾 page.tsx
        💾 globals.css
        💾 _error.tsx 
        💾 index.tsx
        💾 about.tsx
        📁 <= place new page files here

I18n with next-intl

For internationalization (i18n), we use the next-intl package. It provides comprehensive support for localization in Next.js applications.

Tailwind CSS

We use Tailwind CSS for styling. Here are some useful features:

• Responsive design: Use breakpoint prefixes such as mobile, tablet, and desktop to apply styles based on different screen sizes.
• Arbitrary values: Customize your classes with arbitrary values.
• Changing opacity: Adjust the opacity of elements.

SEO

We recommend using the Next.js generate-metadata.