快速结论
1. title.template: "%s | my app" 通常写在 app/layout.js 或 app/layout.tsx 的 metadata 导出里;子页面写 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.js 或 page.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" 即可,行为完全一样。
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/**" 更利于安全、缓存治理和后续排查。
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 默认开启,除非你主动关闭。
生产检查清单
- 根布局设置
metadata.title.default和metadata.title.template,页面只写本页标题。 - 品牌名统一:不要一部分页面用
my app,另一部分页面用myapp。 - 远程图片用
remotePatterns,并尽量写完整的protocol、hostname、pathname。 - App Router 默认 Strict Mode;只有遇到明确兼容性问题时才考虑
reactStrictMode: false。 - 动态页面用
generateMetadata返回标题、描述、Open Graph 和 canonical 所需信息。