Repository files navigation

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

• ⚡Next.js with App Router support
• 🔥 Type checkingTypeScript
• 💎 Integrate withTailwind CSS
• 🖼️ Navigate animation withnext-view-transitions
• 🧰 Statem management withValtio andReact Query
• ✅ Strict Mode for TypeScript and React 18
• 📏 Linter withESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS
• 💖 Code Formatter withPrettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 🧪 E2E Testing withPlaywright
• 💡 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

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

• Node.js >=20.0.0 and pnpm

To install the dependencies, run the following command:

pnpm install

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

# GENERATE_SOURCEMAP=falseNEXT_PUBLIC_VERSION=$npm_package_versionNEXT_PUBLIC_ENV=productionNEXT_PUBLIC_ENV_NAME=local

To start the development server, use the following command:

pnpm dev

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

To start the production server, follow these steps:

pnpm buildpnpm start

To install the Playwright, run the following command:

pnpmexec playwright install

and

pnpmtest

To analyze the bundle size, run the following command:

ANALYZE=true pnpm build

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

docker-compose -f docker-compose.yml builddocker-compose -f docker-compose.yml up

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

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

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

• Auto Import
• ESLint
• GitLens
• Prettier
• Tailwind CSS IntelliSense