File tree Expand file tree Collapse file tree 10 files changed +766
-0
lines changed
apps/docs/content/zh-hans/docs/02-pages
03-building-your-application/06-configuring Expand file tree Collapse file tree 10 files changed +766
-0
lines changed Original file line number Diff line number Diff line change
1
+ ---
2
+ source-updated-at : 2025-05-16T04:52:11.000Z
3
+ translation-updated-at : 2025-05-20T18:15:55.895Z
4
+ title : 配置
5
+ description : 学习如何配置您的 Next.js 应用。
6
+ ---
7
+
8
+ Next.js 允许您根据特定需求自定义项目。这包括与 TypeScript、ESLint 等工具的集成,以及诸如绝对导入 (Absolute Imports) 和环境变量 (Environment Variables) 等内部配置选项。
Original file line number Diff line number Diff line change
1
+ ---
2
+ source-updated-at : 2025-05-16T04:52:11.000Z
3
+ translation-updated-at : 2025-05-20T18:16:00.074Z
4
+ title : 字体模块 (Font Module)
5
+ nav_title : 字体 (Font)
6
+ description : 字体模块 (Font Module) 的 API 参考文档
7
+ source : app/api-reference/components/font
8
+ ---
9
+
10
+ { /* 请勿编辑。本文档内容由上方源文件生成。如需编辑本页内容,请前往编辑器中的源文件页面。你可以使用 `<PagesOnly>Content</PagesOnly>` 组件添加专属于 Pages Router 的内容。任何共享内容不应包裹在组件中。 */ }
Original file line number Diff line number Diff line change
1
+ ---
2
+ source-updated-at : 2025-05-16T04:52:11.000Z
3
+ translation-updated-at : 2025-05-20T18:15:59.619Z
4
+ title : 表单 (Form)
5
+ description : 学习如何使用 `<Form>` 组件处理表单提交及通过客户端导航 (client-side navigation) 更新搜索参数 (search params)。
6
+ source : app/api-reference/components/form
7
+ ---
8
+
9
+ { /* 请勿编辑。本文档内容源自上述链接源文件。如需修改页面内容,请在编辑器中导航至源文件。您可以使用 `<PagesOnly>内容</PagesOnly>` 组件添加特定于 Pages Router 的内容。任何共享内容不应包裹在组件中。 */ }
Original file line number Diff line number Diff line change
1
+ ---
2
+ source-updated-at : 2025-05-16T04:52:11.000Z
3
+ translation-updated-at : 2025-05-20T18:16:11.776Z
4
+ title : Head 组件
5
+ description : 使用内置的 Head 组件向页面 `head` 添加自定义元素。
6
+ ---
7
+
8
+ 我们提供了一个内置组件,用于向页面 ` head ` 追加元素:
9
+
10
+ ``` jsx
11
+ import Head from ' next/head'
12
+
13
+ function IndexPage () {
14
+ return (
15
+ < div>
16
+ < Head>
17
+ < title> My page title< / title>
18
+ < / Head>
19
+ < p> Hello world! < / p>
20
+ < / div>
21
+ )
22
+ }
23
+
24
+ export default IndexPage
25
+ ```
26
+
27
+ ## 避免重复标签
28
+
29
+ 为了防止 ` head ` 中出现重复标签,可以使用 ` key ` 属性确保标签仅渲染一次,如下例所示:
30
+
31
+ ``` jsx
32
+ import Head from ' next/head'
33
+
34
+ function IndexPage () {
35
+ return (
36
+ < div>
37
+ < Head>
38
+ < title> My page title< / title>
39
+ < meta property= " og:title" content= " My page title" key= " title" / >
40
+ < / Head>
41
+ < Head>
42
+ < meta property= " og:title" content= " My new title" key= " title" / >
43
+ < / Head>
44
+ < p> Hello world! < / p>
45
+ < / div>
46
+ )
47
+ }
48
+
49
+ export default IndexPage
50
+ ```
51
+
52
+ 此例中只会渲染第二个 ` <meta property="og:title" /> ` 。具有重复 ` key ` 属性的 ` meta ` 标签会被自动处理。
53
+
54
+ > ** 须知** :Next.js 会自动检查 ` <title> ` 和 ` <base> ` 标签的重复性,因此这些标签无需使用 key 属性。
55
+
56
+ > ` head ` 中的内容会在组件卸载时被清除,因此请确保每个页面完整定义其所需的 ` head ` 内容,不要依赖其他页面添加的内容。
57
+
58
+ ## 最小化嵌套层级
59
+
60
+ ` title ` 、` meta ` 或其他元素(如 ` script ` )必须作为 ` Head ` 元素的** 直接** 子元素,或最多包裹在一层 ` <React.Fragment> ` 或数组中——否则这些标签在客户端导航时可能无法被正确识别。
61
+
62
+ ## 使用 ` next/script ` 加载脚本
63
+
64
+ 建议在组件中使用 [ ` next/script ` ] ( /docs/pages/guides/scripts ) 来加载脚本,而非在 ` next/head ` 中手动创建 ` <script> ` 标签。
65
+
66
+ ## 不支持 ` html ` 或 ` body ` 标签
67
+
68
+ ** 不可** 使用 ` <Head> ` 来设置 ` <html> ` 或 ` <body> ` 标签的属性,否则会导致 ` next-head-count is missing ` 错误。` next/head ` 仅能处理 HTML ` <head> ` 标签内的元素。
You can’t perform that action at this time.
0 commit comments