---

Ship your SaaS faster with Nexty

NEXTY.DEV is a comprehensive Next.js SaaS boilerplate that provides everything developers need to rapidly build and launch modern AI web applications

Try NEXTY.DEV today

🌍 English ∙ 简体中文 ∙ 日本語

Next.js Starter - Multilingual Next.js 16 Starter

A feature-rich Next.js 16 multilingual starter template to help you quickly build globally-ready websites.

• 👉 Source Code
• 👉 Live Demo

🚀 Looking for a full-featured SaaS Starter Template? Check out the complete version

✨ Features

• 🌐 Built-in i18n support (English, Chinese, Japanese)
• 🎨 Modern UI design with Tailwind CSS
• 🌙 Dark/Light theme toggle
• 📱 Responsive layout
• 📝 MDX blog system
• 🔍 SEO optimization
• 📊 Integrated analytics tools
  • Google Analytics
  • Baidu Analytics
  • Google Adsense
  • Vercel Analytics

🚀 Quick Start

Prerequisites

• Node.js 20.9 or higher
• pnpm 9.0 or higher (recommended)

Note: The project has configured packageManager field, we recommend using pnpm for the best experience.

Installation

1. Clone the repository:

git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter

1. Enable Corepack (recommended):

corepack enable

1. Install dependencies:

pnpm install
# or use other package managers
npm install
yarn

1. Copy environment variables:

cp .env.example .env

1. Start the development server:

pnpm dev
# or npm run dev

Visit http://localhost:3000 to view your application.

⚙️ Configuration

1. Basic Setup

   • Edit config/site.ts for website information
   • Update icons and logo in public/
   • Configure app/sitemap.ts for sitemap
   • Update app/robots.ts for robots.txt

2. i18n Setup

   • Add/modify language files in i18n/messages/
   • Configure supported languages in i18n/routing.ts
   • Set up i18n routing in middleware.ts
   • Create pages under app/[locale]/
   • Use the Link component from i18n/routing.ts instead of Next.js default

📝 Content Management

Blog Posts

Create MDX files in blog/[locale] with the following format:

---
title: Post Title
description: Post Description
image: /image.png
slug: /url-path
tags: tag1,tag2
date: 2025-02-20
visible: published
pin: true
---

Post content...

Reference types/blog.ts for supported fields.

Static Pages

Manage static page content in content/[page]/[locale].mdx.

🔍 SEO Optimization

Built-in comprehensive SEO features:

• Server-side rendering and static generation
• Automatic sitemap.xml generation
• robots.txt configuration
• Optimized metadata
• Open Graph support
• Multilingual SEO support

📊 Analytics

Enable analytics by adding IDs in .env:

NEXT_PUBLIC_GOOGLE_ANALYTICS=
NEXT_PUBLIC_BAIDU_TONGJI=
NEXT_PUBLIC_GOOGLE_ADSENSE=

📁 Project Structure

nextjs-starter/
├── app/                      # App directory
│   ├── [locale]/            # Internationalized routes
│   │   ├── about/           # About page
│   │   ├── blog/           # Blog pages
│   │   └── ...              # Other pages
│   ├── api/                 # API routes
│   └── globals/             # Global components
├── blog/                   # Blog content (MDX)
│   ├── en/                  # English blog
│   ├── ja/                  # Japanese blog
│   └── zh/                  # Chinese blog
├── components/              # Reusable components
│   ├── ui/                  # Base UI components
│   ├── header/              # Header components
│   ├── footer/              # Footer components
│   └── ...                  # Other components
├── config/                  # Configuration files
├── content/                 # Static content (MDX)
├── i18n/                    # Internationalization
│   ├── messages/            # Translation files
│   ├── routing.ts           # Routing configuration
│   └── request.ts           # Request configuration
├── lib/                     # Utility functions
├── public/                  # Static assets
└── types/                   # Type definitions

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS + Shadcn/ui
• Internationalization: next-intl
• Content: MDX
• State Management: Zustand
• Deployment: Vercel
• Package Manager: pnpm (recommended)

🚀 Deployment

One-Click Deploy

Manual Deployment to Vercel

1. Push your code to GitHub
2. Import project in Vercel
3. Configure environment variables
4. Deploy

Other Platforms

# Build for production
pnpm build

# Start production server
pnpm start

💡 Development Best Practices

Package Manager

• Project configured with packageManager: "[email protected]"
• Enable Corepack: corepack enable
• Team members should use the same pnpm version

Code Quality

# Lint code
pnpm lint

# Type checking
pnpm type-check

Internationalization Development

1. Adding new language support:

   • Add new language files in i18n/messages/
   • Update i18n/routing.ts configuration
   • Create corresponding language directories in blog/ and content/

2. Using translations:

import { useTranslations } from 'next-intl';

export default function MyComponent() {
  const t = useTranslations('namespace');
  return <h1>{t('title')}</h1>;
}

🔧 Troubleshooting

Common Issues

1. Package manager version mismatch

# Remove node_modules and lockfile
rm -rf node_modules pnpm-lock.yaml
# Reinstall
pnpm install

2. MDX files not displaying

• Check file path is correct
• Verify frontmatter format
• Ensure visible field is set to published

3. Internationalization routing issues

• Use Link component from i18n/routing.ts
• Check middleware.ts configuration

4. Styles not working

• Verify Tailwind CSS class names are correct
• Try restarting development server

Environment Variables

Ensure .env file contains necessary configuration:

# Copy example config
cp .env.example .env
# Modify as needed

📄 License

MIT

🤝 Contributing

Issues and Pull Requests are welcome!

About the Author

Next.js full-stack specialist providing expert services in project development, performance optimization, and SEO improvement.

For consulting and training opportunities, reach out at [email protected]

• Github
• Bento
• Twitter/X