Next.js Starter

A modern, production-ready Next.js starter template with pre-configured SEO, authentication, and internationalization (i18n).

Features

• ⚡ Next.js 14 with App Router
• 🔐 Authentication with NextAuth.js v5 (Auth.js)
• 🌍 Internationalization with next-intl (English & Ukrainian)
• 🔍 SEO Optimized with metadata, sitemap, and robots.txt
• 🎨 Tailwind CSS for styling
• 📝 TypeScript for type safety
• 🧹 ESLint & Prettier for code quality
• 🪝 Husky with pre-commit and pre-push hooks
• 📦 Lint-staged for optimized linting

Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository:

git clone <your-repo-url>
cd starter__next

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Set up environment variables:

cp .env.example .env.local

Edit .env.local and add your configuration:

• NEXTAUTH_URL - Your application URL
• NEXTAUTH_SECRET - Generate a secret key (you can use openssl rand -base64 32)
• OAuth provider credentials (Google, GitHub, etc.)

4. Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

starter__next/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── [locale]/          # Internationalized routes
│   │   ├── api/               # API routes
│   │   ├── layout.tsx         # Root layout
│   │   ├── globals.css        # Global styles
│   │   ├── robots.ts          # Robots.txt generator
│   │   └── sitemap.ts         # Sitemap generator
│   ├── components/            # React components
│   ├── hooks/                 # Custom React hooks
│   ├── lib/                   # Utility functions
│   │   ├── auth.ts            # NextAuth configuration
│   │   ├── i18n.ts            # i18n configuration
│   │   ├── prisma.ts          # Prisma client (optional)
│   │   └── seo.ts             # SEO utilities
│   ├── types/                 # TypeScript type definitions
│   └── middleware.ts          # Next.js middleware
├── messages/                   # Translation files
│   ├── en.json
│   └── uk.json
├── .husky/                    # Git hooks
├── .eslintrc.json             # ESLint configuration
├── .prettierrc                # Prettier configuration
└── next.config.js             # Next.js configuration

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint and fix issues
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run type-check - Run TypeScript type checking

Configuration

Authentication

Authentication is configured using NextAuth.js v5. The configuration is in src/lib/auth.ts.

Supported providers:

• Google OAuth
• GitHub OAuth
• Credentials (email/password)

To add more providers or customize authentication, edit src/lib/auth.ts.

Internationalization

The project uses next-intl for internationalization. Supported locales:

• English (en) - default
• Ukrainian (uk)

To add more languages:

1. Add translation files in messages/ directory
2. Update locales array in src/lib/i18n.ts
3. Update middleware.ts if needed

SEO

SEO is configured in:

• src/app/layout.tsx - Default metadata
• src/app/robots.ts - Robots.txt
• src/app/sitemap.ts - Sitemap generation
• src/lib/seo.ts - SEO utility functions

Use the generateSEO function from @/lib/seo in your pages for dynamic metadata.

Code Quality

The project includes:

• ESLint - Linting with Next.js and TypeScript rules
• Prettier - Code formatting
• Husky - Git hooks
  • pre-commit - Runs lint-staged (ESLint + Prettier)
  • pre-push - Runs lint and type-check

Git Hooks

Husky is configured with:

• pre-commit: Automatically runs ESLint and Prettier on staged files
• pre-push: Runs full lint and type-check before pushing

To skip hooks (not recommended):

git commit --no-verify
git push --no-verify

Database (Optional)

If you want to use a database with Prisma:

1. Install Prisma: npm install prisma @prisma/client
2. Initialize Prisma: npx prisma init
3. Configure your database in prisma/schema.prisma
4. Uncomment PrismaAdapter in src/lib/auth.ts

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables
4. Deploy!

Other Platforms

The project can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

Make sure to set all required environment variables in your deployment platform.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.