Next.js 15 with Intlayer Internationalization Template

This project is a Next.js 15 template with built-in internationalization support using Intlayer. It provides a ready-to-use setup for multilingual web applications with English, Spanish, and French support out of the box.

Features

• Next.js 15: Latest Next.js framework with App Router
• Internationalization: Multi-language support with Intlayer
• TypeScript: Full type safety throughout the application
• TailwindCSS: Utility-first CSS framework for styling
• Shadcn UI: Accessible and customizable UI components
• Locale Switching: Built-in locale switcher component
• Intlayer Editor: Visual editor for managing translations

Getting Started

First, install the dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Intlayer Editor

This project includes the Intlayer visual editor for managing translations. To start the editor:

npm run editor
# or
yarn editor
# or
pnpm editor
# or
bun editor

To run both the Next.js development server and the Intlayer editor simultaneously:

npm run start:all
# or
yarn start:all
# or
pnpm start:all
# or
bun start:all

Project Structure

src/
  app/
    [locale]/           # Dynamic routes for each supported locale
      layout.tsx        # Layout for localized pages
      metadata.ts       # Localized metadata
      page.tsx          # Main page component
  components/
    localeSwitcher/     # Component to change current locale
    clientComponent/    # Example client component with i18n
    serverComponent/    # Example server component with i18n
    ui/                 # Shadcn UI components
  lib/
    utils.ts            # Utility functions

Internationalization Configuration

The project supports English, Spanish, and French locales by default. You can modify supported languages in the intlayer.config.ts file:

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
	internationalization: {
		locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
		defaultLocale: Locales.ENGLISH,
	},
	editor: {
		applicationURL: "http://localhost:3000",
		enabled: true,
	},
};

export default config;

Learn More

• Next.js Documentation - learn about Next.js features and API.
• Intlayer Documentation - learn about Intlayer internationalization.
• TailwindCSS Documentation - learn about TailwindCSS.
• Shadcn UI Documentation - learn about Shadcn UI components.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.