Next.js自定义路由配置：首页隐藏/en，其他路由保留

1. 配置 next-config.ts #

如果仅需单语言（英文）且满足路由要求，可简化配置，无需启用官方i18n多语言套件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 若使用App Router（Next.js 13+），默认已开启appDir，无需额外配置
  // 若使用Pages Router，无需添加特殊配置
};

module.exports = nextConfig;

如果后续需要扩展多语言，可保留i18n配置并关闭自动语言检测：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh'], // 可扩展其他语言
    defaultLocale: 'en',
    localeDetection: false, // 关闭浏览器自动检测语言
  },
};

module.exports = nextConfig;

2. 编写 middleware.ts #

在项目根目录创建middleware.ts，实现路由重定向与重写逻辑，确保首页为根路径/，其他页面强制使用/en/前缀：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 访问/en 时重定向到根路径首页
  if (pathname === '/en') {
    return NextResponse.redirect(new URL('/', request.url));
  }

  // 非根路径且未带/en前缀时，重定向到带/en前缀的路径
  if (!pathname.startsWith('/en/') && pathname !== '/') {
    return NextResponse.redirect(new URL(`/en${pathname}`, request.url));
  }

  // 符合要求的路由直接放行
  return NextResponse.next();
}

// 配置匹配规则：排除API、静态资源等无需处理的路径
export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

3. 页面结构示例 #

App Router（Next.js 13+） #

app/
├── page.tsx          # 对应路径 /（首页）
└── en/
    ├── about/
    │   └── page.tsx  # 对应路径 /en/about
    └── contact/
        └── page.tsx  # 对应路径 /en/contact

Pages Router #

pages/
├── index.tsx         # 对应路径 /（首页）
└── en/
    ├── about.tsx     # 对应路径 /en/about
    └── contact.tsx   # 对应路径 /en/contact

实现效果 #

• 访问 blabla.com 直接进入首页
• 访问 blabla.com/en 自动重定向到 blabla.com
• 访问 blabla.com/about 自动重定向到 blabla.com/en/about
• 直接访问 blabla.com/en/about 可正常进入对应页面

内容的提问来源于stack exchange，提问作者Константин Гаврыш