← 返回目录

Next.js App Router 配置速查

Metadata 标题模板、remotePatterns 与 Strict Mode

针对 Google 常见搜索:next.js metadata title template '%s | my app'remotePatterns pathname optionalapp router react strict mode default,给出可直接落地的官方文档口径。

快速结论

1. title.template: "%s | my app" 通常写在 app/layout.jsapp/layout.tsxmetadata 导出里;子页面写 title: "Dashboard" 后,最终标题会变成 Dashboard | my app

2. "%s | my app""%s | myapp" 都只是品牌文案差异,Next.js 不关心空格;SEO 上建议用真实品牌名并保持全站一致。

3. images.remotePatterns.pathname 可以不写,但建议写。显式限制路径能减少错误来源和图片优化接口被滥用的风险。

4. App Router 的 Strict Mode 官方文档说明自 Next.js 13.5.1 起默认启用;通常不需要再写 reactStrictMode: true

1. metadata title.template 写法

在 App Router 中,静态 metadata 可以从 layout.jspage.js 导出。官方文档把 Metadata API 定位为改进 SEO 和分享展示的方式,并由 Next.js 自动解析生成页面 <head> 标签。

app/layout.tsx 示例:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "my app",
    template: "%s | my app",
  },
  description: "A production Next.js application",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

app/dashboard/page.tsx 示例:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Dashboard",
  description: "View your account dashboard",
};

export default function Page() {
  return <h1>Dashboard</h1>;
}

这个页面最终标题是 Dashboard | my app。如果你搜索的是 next.js metadata title template '%s | myapp' layout.js,把模板改成 "%s | myapp" 即可,行为完全一样。

官方文档: generateMetadata / metadata

2. title.default、template、absolute 怎么选

字段 用途 示例结果
default 没有子页面标题时使用的默认标题 my app
template 格式化子路由标题,%s 会被子页面标题替换 Pricing | my app
absolute 绕过父级模板,输出完整标题 Brand Campaign 2026

SEO 上常见写法是 %s | 品牌名。如果品牌本身叫 myapp,就写 %s | myapp;如果产品名有空格,就写 %s | my app。不要为了关键词堆砌把模板写得很长,标题会在搜索结果里被截断。

3. images.remotePatterns.pathname 是否可选

结论:可选,但建议显式配置remotePatterns 用来声明 next/image 可以优化哪些远程图片来源。生产项目应尽量限制协议、主机名和路径,而不是只写一个很宽泛的域名。

推荐写法:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
        pathname: "/blog/**",
      },
    ],
  },
};

module.exports = nextConfig;

不推荐的宽松写法:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
      },
    ],
  },
};

第二段通常也能表达“允许这个主机的远程图片”,但边界不够清晰。若你只需要 /blog/ 下的图片,写 pathname: "/blog/**" 更利于安全、缓存治理和后续排查。

官方文档: next.config.js images

4. App Router React Strict Mode 默认值

如果你的项目使用 app/ 目录,官方文档的当前说法是:自 Next.js 13.5.1 起,App Router 默认启用 Strict Mode。因此多数 App Router 项目不用在 next.config.js 里重复写 reactStrictMode: true

/** @type {import('next').NextConfig} */
const nextConfig = {
  // App Router projects already default to Strict Mode.
  // Only set this if you intentionally need to disable it:
  // reactStrictMode: false,
};

module.exports = nextConfig;

如果项目仍然使用 pages/ router,或者团队需要显式记录配置意图,可以保留 reactStrictMode: true。但搜索 next.js app router react strict mode default official docs 时,关键答案就是:App Router 默认开启,除非你主动关闭。

官方文档: reactStrictMode

生产检查清单

← 第八章:部署与优化 返回 Next.js 目录 →