Next.js Boilerplate

Personal Next.js boilerplate for rapid project setup and best practices.

Features

• Next.js 14+ (App Router)
• TypeScript
• Tailwind CSS (PostCSS ready)
• Pre-configured ESLint & Prettier
• Customizable folder structure
• Example components, hooks, and utilities

Getting Started

1. Install dependencies:

   npm install
   # or
   yarn
   # or
   pnpm install

2. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

3. Open http://localhost:3000 to view your app.

Usage

• Edit src/app/page.tsx to start building your homepage.
• Add components in src/components/.
• Update global styles in src/styles/globals.css.
• Store constants, hooks, types, and utilities in their respective folders under src/.

Customization

• Update next.config.ts and tsconfig.json as needed.
• Add environment types in src/types/env.d.ts.
• Replace or extend the example components and utilities.

Deployment

Deploy easily to Vercel or your preferred platform.

Project Structure

nextjs-boilerplate/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   ├── constants/
│   ├── hooks/
│   ├── styles/
│   │   └── globals.css
│   ├── types/
│   └── utils/
├── public/
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

Main Dependencies

• Next.js: React framework for server-side rendering, static site generation, and more
• React: JavaScript library for building user interfaces
• Tailwind CSS: Utility-first CSS framework
• ESLint & Prettier: Code linting and formatting
• TypeScript: Strongly typed programming language

License

This project is licensed under the terms found in the LICENSE file.

Author

Created by Son H.Do