mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
1363 lines
249 KiB
HTML
1363 lines
249 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Next.js 备忘清单
|
||
& nextjs cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="这是一份快速参考备忘单，包含 Next.js 的 API 参考列表和一些示例
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="nextjs,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/nextjs.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.0"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="nextjs-备忘清单"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.5a7.5 7.5 0 1 1 11.697 6.216L4.907 4.21A.5.5 0 0 0 4 4.5V12h1V6.06l5.83 8.162A7.5 7.5 0 0 1 0 7.5ZM10 10V4h1v6h-1Z" fill="currentColor"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#nextjs-备忘清单"><span class="icon icon-link"></span></a>Next.js 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://www.npmjs.com/package/next"><img src="https://img.shields.io/npm/v/next.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/next"><img src="https://img.shields.io/npm/dm/next.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/vercel/next.js/network/dependents"><img src="https://badgen.net/github/dependents-repo/vercel/next.js" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/vercel/next.js"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">这是一份快速参考备忘单，包含 <a href="https://nextjs.org/">Next.js</a> 的 API 参考列表和一些示例</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建项目">创建项目</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#添加首页">添加首页</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#getserversideprops">getServerSideProps</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#getstaticpaths">getStaticPaths</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#getstaticprops">getStaticProps</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#增量静态再生">增量静态再生</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-useeffect-客户端数据获取">使用 useEffect 客户端数据获取</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-swr-获取客户端数据">使用 SWR 获取客户端数据</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#静态文件服务">静态文件服务</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#支持的浏览器和功能">支持的浏览器和功能</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#内置-css-支持">内置 CSS 支持</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#添加全局样式表">添加全局样式表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从-node_modules-导入样式">从 node_modules 导入样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#添加组件级-css-css-modules">添加组件级 CSS (CSS Modules)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#sass-支持">Sass 支持</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自定义-sass-选项">自定义 Sass 选项</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#sass-变量">Sass 变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-in-js">CSS-in-JS</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#layouts">Layouts</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基础示例">基础示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#带有自定义应用程序的单一共享布局">带有自定义应用程序的单一共享布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-typescript">使用 TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#每页布局">每页布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数据请求">数据请求</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#图片优化">图片优化</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#本地图片">本地图片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#远程图片">远程图片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#priority">Priority</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#优化字体">优化字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#google-字体">Google 字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指定粗细">指定粗细</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组指定多个-weight-或-style">数组指定多个 weight 或 style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#在-head-中应用字体">在 <head> 中应用字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单页使用">单页使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指定一个子集">指定一个子集</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#本地字体">本地字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-tailwind-css">使用 Tailwind CSS</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#优化-scripts">优化 Scripts</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#页面脚本">页面脚本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#app-脚本">App 脚本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#将脚本卸载到-web-worker实验性的">将脚本卸载到 Web Worker（实验性的）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#其他属性">其他属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内联脚本">内联脚本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#执行附加代码">执行附加代码</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#eslint">ESLint</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#集成-eslint">集成 ESLint</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#strict">Strict</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自定义设置">自定义设置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对自定义目录和文件进行检查">对自定义目录和文件进行检查</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#禁用规则">禁用规则</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#core-web-vitals">Core Web Vitals</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#prettier">Prettier</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#lint-staged">lint-staged</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#typescript">TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#create-next-app">create-next-app</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#静态生成和服务端渲染">静态生成和服务端渲染</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#现有项目添加-ts-配置">现有项目添加 ts 配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#api-路由">API 路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自定义应用">自定义应用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类型检查-nextconfigjs">类型检查 next.config.js</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#忽略-typescript-错误">忽略 TypeScript 错误</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#环境变量">环境变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#加载环境变量">加载环境变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自动扩展-env-文件中的变量">自动扩展 .env* 文件中的变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#向浏览器公开环境变量">向浏览器公开环境变量</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#路由">路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#具有动态路由的页面">具有动态路由的页面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#页面之间的链接">页面之间的链接</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#链接到动态路径">链接到动态路径</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#url-对象">URL 对象</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态路由">动态路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#多个动态路由">多个动态路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#捕捉所有路由">捕捉所有路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#可选捕获所有路由">可选捕获所有路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件执行调整页面">事件执行调整页面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#浅路由">浅路由</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#注意事项">注意事项</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="创建项目"><a aria-hidden="true" tabindex="-1" href="#创建项目"><span class="icon icon-link"></span></a>创建项目</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">npx create-next-app@latest
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">yarn</span> create next-app
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">pnpm</span> create next-app
|
||
</span></code></pre>
|
||
<p>或者创建 <a href="./typescript.html">TypeScript</a> 项目</p>
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">npx create-next-app@latest <span class="token parameter variable">--typescript</span>
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">yarn</span> create next-app <span class="token parameter variable">--typescript</span>
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">pnpm</span> create next-app <span class="token parameter variable">--typescript</span>
|
||
</span></code></pre>
|
||
<p>运行 <code>npm run dev</code> 或 <code>yarn dev</code> 或 <code>pnpm dev</code> 以在 <a href="http://localhost:3000">http://localhost:3000</a> 上启动开发服务器</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="添加首页"><a aria-hidden="true" tabindex="-1" href="#添加首页"><span class="icon icon-link"></span></a>添加首页</h3><div class="wrap-body">
|
||
<p>使用以下内容填充 <code>pages/index.js</code>：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">HomePage</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Welcome to Next.js!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">HomePage</span>
|
||
</span></code></pre>
|
||
<p><code>Next.js</code> 是围绕页面的概念构建的。 页面是从 <code>pages</code> 目录中的 <code>.js</code>、<code>.jsx</code>、<code>.ts</code> 或 <code>.tsx</code> 文件导出的 <code>React</code> 组件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="getserversideprops"><a aria-hidden="true" tabindex="-1" href="#getserversideprops"><span class="icon icon-link"></span></a>getServerSideProps</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Page</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 渲染数据...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 每个请求都会调用它</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getServerSideProps</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 从外部 API 获取数据</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://.../data</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword control-flow">await</span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 通过 props 向页面传递数据</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Page</span>
|
||
</span></code></pre>
|
||
<p>如果您从页面导出一个名为 <code>getServerSideProps</code>（服务器端渲染）的函数，<code>Next.js</code> 将使用 <code>getServerSideProps</code> 返回的数据在每个请求上预渲染该页面</p>
|
||
<ul>
|
||
<li>当您直接请求此页面时，<code>getServerSideProps</code> 在请求时运行，此页面将使用返回的 props 进行预渲染</li>
|
||
<li>当您通过 <code>next/link</code> 或 <code>next/router</code> 在客户端页面转换上请求此页面时，<code>Next.js</code> 会向服务器发送 API 请求，服务器运行 <code>getServerSideProps</code></li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="getstaticpaths"><a aria-hidden="true" tabindex="-1" href="#getstaticpaths"><span class="icon icon-link"></span></a>getStaticPaths</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/posts/[id].js</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getStaticPaths</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 当这是真的时（在预览环境中）不要预呈现任何静态页面（更快的构建，但更慢的初始页面加载）</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">SKIP_BUILD_STATIC_GENERATION</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'blocking'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 调用外部 API 端点以获取帖子</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://.../posts'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> posts <span class="token operator">=</span> <span class="token keyword control-flow">await</span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 根据帖子获取我们要预渲染的路径 在生产环境中，预渲染所有页面</span>
|
||
</span><span class="code-line"> <span class="token comment">// （构建速度较慢，但初始页面加载速度较快）</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> paths <span class="token operator">=</span> posts<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> post<span class="token punctuation">.</span><span class="token property-access">id</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// { fallback: false } 表示其他路由应该 404</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> paths<span class="token punctuation">,</span> <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>如果页面具有动态路由并使用 <code>getStaticProps</code>，则需要定义要静态生成的路径列表</p>
|
||
<ul>
|
||
<li>数据来自无头 CMS</li>
|
||
<li>数据来自数据库</li>
|
||
<li>数据来自文件系统</li>
|
||
<li>数据可以公开缓存（非用户特定）</li>
|
||
<li>页面必须预渲染（用于 SEO）并且速度非常快 —— <code>getStaticProps</code> 生成 HTML 和 JSON 文件，这两种文件都可以由 CDN 缓存以提高性能</li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="getstaticprops"><a aria-hidden="true" tabindex="-1" href="#getstaticprops"><span class="icon icon-link"></span></a>getStaticProps</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 帖子将在构建时由 getStaticProps() 填充</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Blog</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> posts <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>posts<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>post<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 这个函数在服务器端的构建时被调用。</span>
|
||
</span><span class="code-line"><span class="token comment">// 它不会在客户端调用，因此您甚至可以直接进行数据库查询。</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getStaticProps</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 调用外部 API 端点以获取帖子。 您可以使用任何数据获取库</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://.../posts'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> posts <span class="token operator">=</span> <span class="token keyword control-flow">await</span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 通过返回 { props: { posts } }，Blog 组件将在构建时接收 `posts` 作为 prop</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> posts<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Blog</span>
|
||
</span></code></pre>
|
||
<p>在服务器端的构建时被调用</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="增量静态再生"><a aria-hidden="true" tabindex="-1" href="#增量静态再生"><span class="icon icon-link"></span></a>增量静态再生</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Blog</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> posts <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>posts<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>post<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 这个函数在服务器端的构建时被调用</span>
|
||
</span><span class="code-line"><span class="token comment">// 如果启用了重新验证并且有新请求进入，它可能会在无服务器功能上再次调用</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getStaticProps</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://.../posts'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> posts <span class="token operator">=</span> <span class="token keyword control-flow">await</span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> posts<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// Next.js 将尝试重新生成页面：</span>
|
||
</span><span class="code-line"> <span class="token comment">// - 当请求进来时</span>
|
||
</span><span class="code-line"> <span class="token comment">// - 最多每 10 秒一次</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">revalidate</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 片刻之间</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 这个函数在服务器端的构建时被调用</span>
|
||
</span><span class="code-line"><span class="token comment">// 如果尚未生成路径，则可能会在无服务器函数上再次调用它</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getStaticPaths</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://.../posts'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> posts <span class="token operator">=</span> <span class="token keyword control-flow">await</span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 根据帖子获取我们要预渲染的路径</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> paths <span class="token operator">=</span> posts<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> post<span class="token punctuation">.</span><span class="token property-access">id</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 我们将在构建时仅预渲染这些路径</span>
|
||
</span><span class="code-line"> <span class="token comment">// { fallback: blocking } 如果路径不存在，服务器将按需呈现页面</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> paths<span class="token punctuation">,</span> <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'blocking'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Blog</span>
|
||
</span></code></pre>
|
||
<ul>
|
||
<li>在初始请求之后和 10 秒之前对页面的任何请求也会被缓存和即时</li>
|
||
<li>在 10 秒窗口之后，下一个请求仍将显示缓存的（陈旧的）页面</li>
|
||
<li>Next.js 在后台触发页面的重新生成</li>
|
||
<li>一旦页面生成成功，Next.js 将使缓存失效并显示更新后的页面。如果后台重新生成失败，旧页面仍将保持不变</li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-useeffect-客户端数据获取"><a aria-hidden="true" tabindex="-1" href="#使用-useeffect-客户端数据获取"><span class="icon icon-link"></span></a>使用 useEffect 客户端数据获取</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Profile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>data<span class="token punctuation">,</span> setData<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>isLoading<span class="token punctuation">,</span> setLoading<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'/api/profile-data'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setData</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isLoading<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">No profile data</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">bio</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-swr-获取客户端数据"><a aria-hidden="true" tabindex="-1" href="#使用-swr-获取客户端数据"><span class="icon icon-link"></span></a>使用 SWR 获取客户端数据</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">useSWR</span> <span class="token keyword module">from</span> <span class="token string">'swr'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">fetcher</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token spread operator">...</span>args</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token spread operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Profile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSWR</span><span class="token punctuation">(</span><span class="token string">'/api/profile-data'</span><span class="token punctuation">,</span> fetcher<span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Failed to load</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">bio</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="静态文件服务"><a aria-hidden="true" tabindex="-1" href="#静态文件服务"><span class="icon icon-link"></span></a>静态文件服务</h3><div class="wrap-body">
|
||
<p>Next.js 可以在根目录中名为 <code>public</code> 的文件夹下提供静态文件，如图像。 然后，您的代码可以从基本 URL (<code>/</code>) 开始引用 <code>public</code> 中的文件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Image</span></span> <span class="token keyword module">from</span> <span class="token string">'next/image'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Avatar</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/me.png<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>me<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Avatar</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="支持的浏览器和功能"><a aria-hidden="true" tabindex="-1" href="#支持的浏览器和功能"><span class="icon icon-link"></span></a>支持的浏览器和功能</h3><div class="wrap-body">
|
||
<p>Next.js 支持零配置的现代浏览器</p>
|
||
<ul class="cols-3">
|
||
<li>Chrome 64+</li>
|
||
<li>Edge 79+</li>
|
||
<li>Firefox 67+</li>
|
||
<li>Opera 51+</li>
|
||
<li>Safari 12+</li>
|
||
</ul>
|
||
<!--rehype:className=cols-3-->
|
||
<p>Next.js 支持在 <code>package.json</code> 文件中配置 <code>Browserslist</code></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"browserslist"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token string">"chrome 64"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">"edge 79"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">"firefox 67"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">"opera 51"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">"safari 12"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="内置-css-支持"><a aria-hidden="true" tabindex="-1" href="#内置-css-支持"><span class="icon icon-link"></span></a>内置 CSS 支持</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="添加全局样式表"><a aria-hidden="true" tabindex="-1" href="#添加全局样式表"><span class="icon icon-link"></span></a>添加全局样式表</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>如果不存在，请创建一个 <code>pages/_app.js</code> 文件。 然后，导入 <code>styles.css</code> 文件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token string">'../styles.css'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 在新的“pages/_app.js”文件中需要此默认导出</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span></span><span class="code-line"><span class="token parameter"><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>例如，考虑以下名为 <code>styles.css</code> 的样式表</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span>
|
||
</span><span class="code-line"> <span class="token string">'SF Pro Text'</span><span class="token punctuation">,</span> <span class="token string">'SF Pro Icons'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> <span class="token string">'Helvetica'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">'Arial'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="从-node_modules-导入样式"><a aria-hidden="true" tabindex="-1" href="#从-node_modules-导入样式"><span class="icon icon-link"></span></a>从 node_modules 导入样式</h3><div class="wrap-body">
|
||
<p>对于全局样式表，如 <code>bootstrap</code> 或 <code>nprogress</code>，您应该在 <code>pages/_app.js</code> 中导入文件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token string">'bootstrap/dist/css/bootstrap.css'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span></span><span class="code-line"><span class="token parameter"><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>从 <red>Next.js 9.5.4</red> 开始，您的应用程序中的任何地方都允许从 <code>node_modules</code> 导入 CSS 文件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="添加组件级-css-css-modules"><a aria-hidden="true" tabindex="-1" href="#添加组件级-css-css-modules"><span class="icon icon-link"></span></a>添加组件级 CSS (CSS Modules)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>您无需担心 .error {} 与任何其他 <code>.css</code> 或 <code>.module.css</code> 文件！他将被生成 <code>hash</code> 名称</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.error</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>然后，创建 <code>components/Button.js</code>，导入并使用上面的 CSS 文件：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styles</span> <span class="token keyword module">from</span> <span class="token string">'./Button.module.css'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Button</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token comment">// 请注意“error”类</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token comment">// 是如何作为导入的“styles”对象的属性访问的</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">error</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Destroy
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="sass-支持"><a aria-hidden="true" tabindex="-1" href="#sass-支持"><span class="icon icon-link"></span></a>Sass 支持</h3><div class="wrap-body">
|
||
<p>Next.js 允许您使用 <code>.scss</code> 和 <code>.sass</code> 扩展名导入 Sass，可以通过 CSS 模块和 <code>.module.scss</code> 或 <code>.module.sass</code> 扩展名使用组件级 <code>Sass</code></p>
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> --save-dev sass
|
||
</span></code></pre>
|
||
<p>在使用 Next.js 的内置 <code>Sass</code> 支持之前，请务必<pur>安装 <code>sass</code></pur></p>
|
||
</div></div></div><div class="wrap h3body-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="自定义-sass-选项"><a aria-hidden="true" tabindex="-1" href="#自定义-sass-选项"><span class="icon icon-link"></span></a>自定义 Sass 选项</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>通过在 <code>next.config.js</code> 中使用 <code>sassOptions</code> 来实现配置 <code>Sass</code> 编译器。例如添加 <code>includePaths</code>：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">sassOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">includePaths</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'styles'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="sass-变量"><a aria-hidden="true" tabindex="-1" href="#sass-变量"><span class="icon icon-link"></span></a>Sass 变量</h4>
|
||
<pre class="language-sass"><code class="language-sass code-highlight"><span class="code-line"><span class="token comment">/* variables.module.scss */</span>
|
||
</span><span class="code-line"><span class="token variable-line"><span class="token variable">$primary-color</span><span class="token punctuation">:</span> #64ff00;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token property-line"><span class="token punctuation">:</span><span class="token property">export</span> {</span>
|
||
</span><span class="code-line"><span class="token property-line"> <span class="token property">primaryColor</span><span class="token punctuation">:</span> <span class="token variable">$primary-color</span>;</span>
|
||
</span><span class="code-line"><span class="token selector">}</span>
|
||
</span></code></pre>
|
||
<p>在 <code>pages/_app.js</code> 中导入 <code>variables.module.scss</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">variables</span> <span class="token keyword module">from</span> <span class="token string">'../styles/variables.module.scss'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span> <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>variables<span class="token punctuation">.</span><span class="token property-access">primaryColor</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-in-js"><a aria-hidden="true" tabindex="-1" href="#css-in-js"><span class="icon icon-link"></span></a>CSS-in-JS</h3><div class="wrap-body">
|
||
<p>最简单的一种是内联样式：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">HiThere</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">hi 这里</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">HiThere</span>
|
||
</span></code></pre>
|
||
<p>使用 <a href="https://github.com/vercel/styled-jsx">styled-jsx</a> 的组件如下所示：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">HelloWorld</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Hello world
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">scoped!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">jsx</span><span class="token punctuation">></span></span><span class="token plain-text">{`
|
||
</span></span><span class="code-line"><span class="token plain-text"> p { color: blue; }
|
||
</span></span><span class="code-line"><span class="token plain-text"> div { background: red; }
|
||
</span></span><span class="code-line"><span class="token plain-text"> @media (max-width: 600px) {
|
||
</span></span><span class="code-line"><span class="token plain-text"> div { background: blue; }
|
||
</span></span><span class="code-line"><span class="token plain-text"> }
|
||
</span></span><span class="code-line"><span class="token plain-text"> `}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">global</span> <span class="token attr-name">jsx</span><span class="token punctuation">></span></span><span class="token plain-text">{`
|
||
</span></span><span class="code-line"><span class="token plain-text"> body { background: black; }
|
||
</span></span><span class="code-line"><span class="token plain-text"> `}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">HelloWorld</span>
|
||
</span></code></pre>
|
||
<p>当然，你也可以使用 <a href="./styled-components.html">styled-components</a></p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="layouts"><a aria-hidden="true" tabindex="-1" href="#layouts"><span class="icon icon-link"></span></a>Layouts</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="基础示例"><a aria-hidden="true" tabindex="-1" href="#基础示例"><span class="icon icon-link"></span></a>基础示例</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// components/layout.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Navbar</span></span> <span class="token keyword module">from</span> <span class="token string">'./navbar'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Footer</span></span> <span class="token keyword module">from</span> <span class="token string">'./footer'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Layout</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navbar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Footer</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="带有自定义应用程序的单一共享布局"><a aria-hidden="true" tabindex="-1" href="#带有自定义应用程序的单一共享布局"><span class="icon icon-link"></span></a>带有自定义应用程序的单一共享布局</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Layout</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/layout'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="使用-typescript"><a aria-hidden="true" tabindex="-1" href="#使用-typescript"><span class="icon icon-link"></span></a>使用 TypeScript</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/index.tsx</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> type <span class="token punctuation">{</span> <span class="token maybe-class-name">ReactElement</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Layout</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/layout'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">NestedLayout</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/nested-layout'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> type <span class="token punctuation">{</span> <span class="token maybe-class-name">NextPageWithLayout</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">'./_app'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token literal-property property">Page</span><span class="token operator">:</span> <span class="token function-variable function"><span class="token maybe-class-name">NextPageWithLayout</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">hello world</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">Page</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">getLayout</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token maybe-class-name">ReactElement</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NestedLayout</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>page<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">NestedLayout</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Page</span>
|
||
</span></code></pre>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.tsx</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">import</span> type <span class="token punctuation">{</span> <span class="token maybe-class-name">ReactElement</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ReactNode</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> type <span class="token punctuation">{</span> <span class="token maybe-class-name">NextPage</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">'next'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> type <span class="token punctuation">{</span> <span class="token maybe-class-name">AppProps</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">'next/app'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> type <span class="token maybe-class-name">NextPageWithLayout</span><span class="token operator"><</span><span class="token constant">P</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token constant">IP</span> <span class="token operator">=</span> <span class="token constant">P</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token maybe-class-name">NextPage</span><span class="token operator"><</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">IP</span><span class="token operator">></span> <span class="token operator">&</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> getLayout<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token maybe-class-name">ReactElement</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token maybe-class-name">ReactNode</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">type <span class="token maybe-class-name">AppPropsWithLayout</span> <span class="token operator">=</span> <span class="token maybe-class-name">AppProps</span> <span class="token operator">&</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">Component</span><span class="token operator">:</span> <span class="token maybe-class-name">NextPageWithLayout</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token maybe-class-name">AppPropsWithLayout</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 使用在页面级别定义的布局（如果可用）</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> getLayout <span class="token operator">=</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">.</span><span class="token property-access">getLayout</span> <span class="token operator">??</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> page<span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="每页布局"><a aria-hidden="true" tabindex="-1" href="#每页布局"><span class="icon icon-link"></span></a>每页布局</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/index.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Layout</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/layout'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">NestedLayout</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/nested-layout'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Page</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token comment">/** Your content */</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">Page</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">getLayout</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NestedLayout</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>page<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">NestedLayout</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 使用在页面级别定义的布局（如果可用）</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> getLayout <span class="token operator">=</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">.</span><span class="token property-access">getLayout</span> <span class="token operator">||</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> page<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数据请求"><a aria-hidden="true" tabindex="-1" href="#数据请求"><span class="icon icon-link"></span></a>数据请求</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// components/layout.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">useSWR</span> <span class="token keyword module">from</span> <span class="token string">'swr'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Navbar</span></span> <span class="token keyword module">from</span> <span class="token string">'./navbar'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Footer</span></span> <span class="token keyword module">from</span> <span class="token string">'./footer'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Layout</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSWR</span><span class="token punctuation">(</span><span class="token string">'/api/navigation'</span><span class="token punctuation">,</span> fetcher<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Failed to load</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navbar</span></span> <span class="token attr-name">links</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">links</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Footer</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="图片优化"><a aria-hidden="true" tabindex="-1" href="#图片优化"><span class="icon icon-link"></span></a>图片优化</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="本地图片"><a aria-hidden="true" tabindex="-1" href="#本地图片"><span class="icon icon-link"></span></a>本地图片</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Image</span></span> <span class="token keyword module">from</span> <span class="token string">'next/image'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">profilePic</span> <span class="token keyword module">from</span> <span class="token string">'../public/me.png'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">My Homepage</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>profilePic<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Picture of the author<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token comment">// width={500} 自动提供</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token comment">// height={500} 自动提供</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token comment">// blurDataURL="data:..." 自动提供</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token comment">// placeholder="blur" // 加载时可选的模糊处理</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Welcome to my homepage!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="远程图片"><a aria-hidden="true" tabindex="-1" href="#远程图片"><span class="icon icon-link"></span></a>远程图片</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Image</span></span> <span class="token keyword module">from</span> <span class="token string">'next/image'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">My Homepage</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/me.png<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Picture of the author<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">500</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">500</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Welcome to my homepage!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>要使用远程图像，<code>src</code> 属性应该是一个 <code>URL</code> 字符串，可以是相对的也可以是绝对的</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="priority"><a aria-hidden="true" tabindex="-1" href="#priority"><span class="icon icon-link"></span></a>Priority</h3><div class="wrap-body">
|
||
<p>您应该将优先级属性添加到将成为每个页面的 <a href="https://web.dev/lcp/#what-elements-are-considered">Largest Contentful Paint (LCP) 元素</a>的图像。 这样做允许 Next.js 专门确定要加载的图像的优先级（例如，通过预加载标签或优先级提示），从而显着提高 LCP</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Image</span></span> <span class="token keyword module">from</span> <span class="token string">'next/image'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">My Homepage</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/me.png<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Picture of the author<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">500</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">500</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">priority</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Welcome to my homepage!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="优化字体"><a aria-hidden="true" tabindex="-1" href="#优化字体"><span class="icon icon-link"></span></a>优化字体</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="google-字体"><a aria-hidden="true" tabindex="-1" href="#google-字体"><span class="icon icon-link"></span></a>Google 字体</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>自动托管任何 Google 字体。 字体包含在部署中，并从与您的部署相同的域提供服务。 浏览器不会向 Google 发送任何请求</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Inter</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@next/font/google'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 如果加载可变字体，则无需指定字体粗细</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> inter <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Inter</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span></span><span class="code-line"><span class="token parameter"><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inter<span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="指定粗细"><a aria-hidden="true" tabindex="-1" href="#指定粗细"><span class="icon icon-link"></span></a>指定粗细</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>如果不能使用可变字体，则需要指定粗细：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Roboto</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@next/font/google'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> roboto <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Roboto</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'400'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span></span><span class="code-line"><span class="token parameter"><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>roboto<span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组指定多个-weight-或-style"><a aria-hidden="true" tabindex="-1" href="#数组指定多个-weight-或-style"><span class="icon icon-link"></span></a>数组指定多个 weight 或 style</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> roboto <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Roboto</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'400'</span><span class="token punctuation">,</span> <span class="token string">'700'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'normal'</span><span class="token punctuation">,</span> <span class="token string">'italic'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="在-head-中应用字体"><a aria-hidden="true" tabindex="-1" href="#在-head-中应用字体"><span class="icon icon-link"></span></a>在 <head> 中应用字体</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Inter</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@next/font/google'</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> inter <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Inter</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">jsx</span> <span class="token attr-name">global</span><span class="token punctuation">></span></span><span class="token plain-text">{`
|
||
</span></span><span class="code-line"><span class="token plain-text"> html {
|
||
</span></span><span class="code-line"><span class="token plain-text"> font-family: ${inter.style.fontFamily};
|
||
</span></span><span class="code-line"><span class="token plain-text"> }
|
||
</span></span><span class="code-line"><span class="token plain-text"> `}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="单页使用"><a aria-hidden="true" tabindex="-1" href="#单页使用"><span class="icon icon-link"></span></a>单页使用</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/index.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Inter</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@next/font/google'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> inter <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Inter</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inter<span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指定一个子集"><a aria-hidden="true" tabindex="-1" href="#指定一个子集"><span class="icon icon-link"></span></a>指定一个子集</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> inter <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Inter</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>在 <code>next.config.js</code> 中全局使用所有字体</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// next.config.js</span>
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">experimental</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontLoaders</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'@next/font/google'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>如果两者都配置，则使用函数调用中的子集</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="本地字体"><a aria-hidden="true" tabindex="-1" href="#本地字体"><span class="icon icon-link"></span></a>本地字体</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">localFont</span> <span class="token keyword module">from</span> <span class="token string">'@next/font/local'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 字体文件可以位于“pages”内</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> myFont <span class="token operator">=</span> <span class="token function">localFont</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'./my-font.woff2'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span></span><span class="code-line"><span class="token parameter"><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>myFont<span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>如果要为单个字体系列使用多个文件，<code>src</code> 可以是一个数组：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> roboto <span class="token operator">=</span> <span class="token function">localFont</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'./Roboto-Regular.woff2'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'400'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'./Roboto-Italic.woff2'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'400'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'./Roboto-Bold.woff2'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'700'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'./Roboto-BoldItalic.woff2'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'700'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="使用-tailwind-css"><a aria-hidden="true" tabindex="-1" href="#使用-tailwind-css"><span class="icon icon-link"></span></a>使用 Tailwind CSS</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/_app.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Inter</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@next/font/google'</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> inter <span class="token operator">=</span> <span class="token function"><span class="token maybe-class-name">Inter</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">subsets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'latin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">variable</span><span class="token operator">:</span> <span class="token string">'--font-inter'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>inter<span class="token punctuation">.</span><span class="token property-access">variable</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> font-sans</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>最后，将 CSS 变量添加到您的 Tailwind CSS 配置中：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// tailwind.config.js</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> fontFamily <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'tailwindcss/defaultTheme'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token string">'./pages/**/*.{js,ts,jsx,tsx}'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">'./components/**/*.{js,ts,jsx,tsx}'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">sans</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'var(--font-inter)'</span><span class="token punctuation">,</span> <span class="token spread operator">...</span>fontFamily<span class="token punctuation">.</span><span class="token property-access">sans</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="优化-scripts"><a aria-hidden="true" tabindex="-1" href="#优化-scripts"><span class="icon icon-link"></span></a>优化 Scripts</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="页面脚本"><a aria-hidden="true" tabindex="-1" href="#页面脚本"><span class="icon icon-link"></span></a>页面脚本</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Script</span></span> <span class="token keyword module">from</span> <span class="token string">'next/script'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Dashboard</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/script.js<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="app-脚本"><a aria-hidden="true" tabindex="-1" href="#app-脚本"><span class="icon icon-link"></span></a>App 脚本</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>要为所有路由加载第三方脚本，导入 <code>next/script</code> 并将脚本直接包含在 <code>pages/_app.js</code> 中</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Script</span></span> <span class="token keyword module">from</span> <span class="token string">'next/script'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyApp</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span></span><span class="code-line"><span class="token parameter"><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/script.js<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="将脚本卸载到-web-worker实验性的"><a aria-hidden="true" tabindex="-1" href="#将脚本卸载到-web-worker实验性的"><span class="icon icon-link"></span></a>将脚本卸载到 Web Worker（实验性的）</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>此策略仍处于试验阶段，只有在 <code>next.config.js</code> 中启用了 <code>nextScriptWorkers</code> 标志时才能使用：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">experimental</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">nextScriptWorkers</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>设置完成后，定义 <code>strategy="worker"</code> 将自动在您的应用程序中实例化 <code>Partytown</code> 并将脚本卸载到网络工作者</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Script</span></span> <span class="token keyword module">from</span> <span class="token string">'next/script'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/script.js<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>worker<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="其他属性"><a aria-hidden="true" tabindex="-1" href="#其他属性"><span class="icon icon-link"></span></a>其他属性</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Script</span></span> <span class="token keyword module">from</span> <span class="token string">'next/script'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Page</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/script.js<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-script<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">nonce</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>XUENAJFW<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>script<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="内联脚本"><a aria-hidden="true" tabindex="-1" href="#内联脚本"><span class="icon icon-link"></span></a>内联脚本</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show-banner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> {`document.getElementById('banner').classList.remove('hidden')`}
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Script</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show-banner<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">dangerouslySetInnerHTML</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">__html</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">document.getElementById('banner').classList.remove('hidden')</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="执行附加代码"><a aria-hidden="true" tabindex="-1" href="#执行附加代码"><span class="icon icon-link"></span></a>执行附加代码</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Script</span></span> <span class="token keyword module">from</span> <span class="token string">'next/script'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Page</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Script</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/script.js<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onLoad</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Script has loaded'</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="eslint"><a aria-hidden="true" tabindex="-1" href="#eslint"><span class="icon icon-link"></span></a>ESLint</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="集成-eslint"><a aria-hidden="true" tabindex="-1" href="#集成-eslint"><span class="icon icon-link"></span></a>集成 ESLint</h3><div class="wrap-body">
|
||
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">"lint"</span><span class="token operator">:</span> <span class="token string">"next lint"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>然后运行 <code>npm run lint</code> 或 <code>yarn lint</code>：</p>
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">yarn</span> lint
|
||
</span><span class="code-line"><span class="token comment"># 你会看到这样的提示：</span>
|
||
</span><span class="code-line"><span class="token comment">#</span>
|
||
</span><span class="code-line"><span class="token comment"># ? 您想如何配置 ESLint？</span>
|
||
</span><span class="code-line"><span class="token comment">#</span>
|
||
</span><span class="code-line"><span class="token comment"># ❯ 基本配置 + Core Web Vitals 规则集（推荐）</span>
|
||
</span><span class="code-line"><span class="token comment"># 基本配置</span>
|
||
</span><span class="code-line"><span class="token comment"># None</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="strict"><a aria-hidden="true" tabindex="-1" href="#strict"><span class="icon icon-link"></span></a>Strict</h3><div class="wrap-body">
|
||
<p>Strict 严格配置：包括 Next.js 的基本 ESLint 配置以及更严格的 <a href="https://nextjs.org/docs/basic-features/eslint#core-web-vitals">Core Web Vitals 规则集</a></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token string">"next/core-web-vitals"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>Base 基础配置：包括 Next.js 的基本 ESLint 配置</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token string">"next"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>项目的根目录中创建一个包含所选配置的 <code>.eslintrc.json</code> 文件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义设置"><a aria-hidden="true" tabindex="-1" href="#自定义设置"><span class="icon icon-link"></span></a>自定义设置</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token string">"next"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"next"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"rootDir"</span><span class="token operator">:</span> <span class="token string">"packages/my-app/"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>rootDir</code> 可以是路径（相对或绝对）、glob（即“<code>packages/*/</code>”）或路径和/或 <code>glob</code> 数组</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="对自定义目录和文件进行检查"><a aria-hidden="true" tabindex="-1" href="#对自定义目录和文件进行检查"><span class="icon icon-link"></span></a>对自定义目录和文件进行检查</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">eslint</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">dirs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'pages'</span><span class="token punctuation">,</span> <span class="token string">'utils'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>在生产构建期间（<code>next build</code>）仅在“<code>pages</code>”和“<code>utils</code>”目录上运行 <code>ESLint</code>，或者使用命令</p>
|
||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ next lint <span class="token parameter variable">--dir</span> pages <span class="token parameter variable">--dir</span> utils <span class="token parameter variable">--file</span> bar.js
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="禁用规则"><a aria-hidden="true" tabindex="-1" href="#禁用规则"><span class="icon icon-link"></span></a>禁用规则</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>您可以使用 <code>.eslintrc</code> 中的 <code>rules</code> 属性直接更改它们：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token string">"next"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"rules"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"react/no-unescaped-entities"</span><span class="token operator">:</span> <span class="token string">"off"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"@next/next/no-page-custom-font"</span><span class="token operator">:</span> <span class="token string">"off"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>修改或禁用受支持的插件（<code>react</code>、<code>react-hooks</code>、<code>next</code>）提供的任何规则</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="core-web-vitals"><a aria-hidden="true" tabindex="-1" href="#core-web-vitals"><span class="icon icon-link"></span></a>Core Web Vitals</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token string">"next/core-web-vitals"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="prettier"><a aria-hidden="true" tabindex="-1" href="#prettier"><span class="icon icon-link"></span></a>Prettier</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-S</span> eslint-config-prettier
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">--dev</span> eslint-config-prettier
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next"</span><span class="token punctuation">,</span> <span class="token string">"prettier"</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="lint-staged"><a aria-hidden="true" tabindex="-1" href="#lint-staged"><span class="icon icon-link"></span></a>lint-staged</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">buildEslintCommand</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">filenames</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
|
||
</span><span class="code-line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">next lint --fix --file </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>filenames
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token interpolation"> <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">f</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> path<span class="token punctuation">.</span><span class="token method function property-access">relative</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span><span class="token method function property-access">cwd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> f<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token interpolation"> <span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">' --file '</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'*.{js,jsx,ts,tsx}'</span><span class="token operator">:</span> <span class="token punctuation">[</span>buildEslintCommand<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>内容添加到项目根目录中的 <code>.lintstagedrc.js</code> 文件中，以指定 <code>--file</code> 标志</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="typescript"><a aria-hidden="true" tabindex="-1" href="#typescript"><span class="icon icon-link"></span></a>TypeScript</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="create-next-app"><a aria-hidden="true" tabindex="-1" href="#create-next-app"><span class="icon icon-link"></span></a>create-next-app</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">npx create-next-app@latest <span class="token parameter variable">--ts</span>
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">yarn</span> create next-app <span class="token parameter variable">--typescript</span>
|
||
</span><span class="code-line"><span class="token comment"># or</span>
|
||
</span><span class="code-line"><span class="token function">pnpm</span> create next-app <span class="token parameter variable">--ts</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="静态生成和服务端渲染"><a aria-hidden="true" tabindex="-1" href="#静态生成和服务端渲染"><span class="icon icon-link"></span></a>静态生成和服务端渲染</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">GetStaticProps</span><span class="token punctuation">,</span> <span class="token maybe-class-name">GetStaticPaths</span><span class="token punctuation">,</span> <span class="token maybe-class-name">GetServerSideProps</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'next'</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> getStaticProps<span class="token operator">:</span> <span class="token function-variable function">GetStaticProps</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> getStaticPaths<span class="token operator">:</span> <span class="token function-variable function">GetStaticPaths</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> getServerSideProps<span class="token operator">:</span> <span class="token function-variable function">GetServerSideProps</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="现有项目添加-ts-配置"><a aria-hidden="true" tabindex="-1" href="#现有项目添加-ts-配置"><span class="icon icon-link"></span></a>现有项目添加 ts 配置</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">touch</span> tsconfig.json
|
||
</span></code></pre>
|
||
<p>您还可以通过在 <code>next.config.js</code> 文件中设置 <code>typescript.tsconfigPath</code> 属性来提供 <code>tsconfig.json</code> 文件的相对路径</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="api-路由"><a aria-hidden="true" tabindex="-1" href="#api-路由"><span class="icon icon-link"></span></a>API 路由</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">NextApiRequest</span><span class="token punctuation">,</span> <span class="token maybe-class-name">NextApiResponse</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> req<span class="token operator">:</span> <span class="token maybe-class-name">NextApiRequest</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> res<span class="token operator">:</span> <span class="token maybe-class-name">NextApiResponse</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> res<span class="token punctuation">.</span><span class="token method function property-access">status</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span><span class="token string">'John Doe'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>您还可以键入响应数据：</p>
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">NextApiRequest</span><span class="token punctuation">,</span> <span class="token maybe-class-name">NextApiResponse</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Data</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> req<span class="token operator">:</span> <span class="token maybe-class-name">NextApiRequest</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> res<span class="token operator">:</span> <span class="token maybe-class-name">NextApiResponse</span><span class="token operator"><</span><span class="token maybe-class-name">Data</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> res<span class="token punctuation">.</span><span class="token method function property-access">status</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span><span class="token string">'John Doe'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义应用"><a aria-hidden="true" tabindex="-1" href="#自定义应用"><span class="icon icon-link"></span></a>自定义应用</h3><div class="wrap-body">
|
||
<p>使用内置类型 <code>AppProps</code> 并将文件名更改为 <code>./pages/_app.tsx</code>，如下所示：</p>
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">AppProps</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next/app'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span> pageProps
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token operator">:</span> <span class="token maybe-class-name">AppProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>pageProps<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="类型检查-nextconfigjs"><a aria-hidden="true" tabindex="-1" href="#类型检查-nextconfigjs"><span class="icon icon-link"></span></a>类型检查 next.config.js</h3><div class="wrap-body">
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token comment">// @ts-check</span>
|
||
</span><span class="code-line"><span class="token comment">/**
|
||
</span></span><span class="code-line"><span class="token comment"> * @type {import('next').NextConfig}
|
||
</span></span><span class="code-line"><span class="token comment"> **/</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> nextConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 配置选项在这里 */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> nextConfig
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="忽略-typescript-错误"><a aria-hidden="true" tabindex="-1" href="#忽略-typescript-错误"><span class="icon icon-link"></span></a>忽略 TypeScript 错误</h3><div class="wrap-body">
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> typescript<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> ignoreBuildErrors<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>危险地允许生产构建成功完成，即使您的项目有类型错误</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="环境变量"><a aria-hidden="true" tabindex="-1" href="#环境变量"><span class="icon icon-link"></span></a>环境变量</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="加载环境变量"><a aria-hidden="true" tabindex="-1" href="#加载环境变量"><span class="icon icon-link"></span></a>加载环境变量</h3><div class="wrap-body">
|
||
<p>将环境变量从 <code>.env.local</code> 加载到 <code>process.env</code> 中</p>
|
||
<pre class="language-ini"><code class="language-ini code-highlight"><span class="code-line"><span class="token key attr-name">DB_HOST</span><span class="token punctuation">=</span><span class="token value attr-value">localhost</span>
|
||
</span><span class="code-line"><span class="token key attr-name">DB_USER</span><span class="token punctuation">=</span><span class="token value attr-value">myuser</span>
|
||
</span><span class="code-line"><span class="token key attr-name">DB_PASS</span><span class="token punctuation">=</span><span class="token value attr-value">mypassword</span>
|
||
</span></code></pre>
|
||
<p>使用环境变量</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// pages/index.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getStaticProps</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> db <span class="token operator">=</span> <span class="token keyword control-flow">await</span> myDB<span class="token punctuation">.</span><span class="token method function property-access">connect</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">host</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">DB_HOST</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">username</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">DB_USER</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">password</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">DB_PASS</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自动扩展-env-文件中的变量"><a aria-hidden="true" tabindex="-1" href="#自动扩展-env-文件中的变量"><span class="icon icon-link"></span></a>自动扩展 .env* 文件中的变量</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># .env</span>
|
||
</span><span class="code-line"><span class="token assign-left variable"><span class="token environment constant">HOSTNAME</span></span><span class="token operator">=</span>localhost
|
||
</span><span class="code-line"><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">8080</span>
|
||
</span><span class="code-line"><span class="token assign-left variable">HOST</span><span class="token operator">=</span>http://<span class="token environment constant">$HOSTNAME</span><span class="token builtin class-name">:</span><span class="token variable">$PORT</span>
|
||
</span></code></pre>
|
||
<p>如果您尝试使用实际值中带有 <code>$</code> 的变量，则需要像这样对其进行转义：<code>\$</code></p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># .env</span>
|
||
</span><span class="code-line"><span class="token assign-left variable">A</span><span class="token operator">=</span>abc
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># becomes "preabc"</span>
|
||
</span><span class="code-line"><span class="token assign-left variable">WRONG</span><span class="token operator">=</span>pre<span class="token variable">$A</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># becomes "pre$A"</span>
|
||
</span><span class="code-line"><span class="token assign-left variable">CORRECT</span><span class="token operator">=</span>pre<span class="token punctuation">\</span><span class="token variable">$A</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="向浏览器公开环境变量"><a aria-hidden="true" tabindex="-1" href="#向浏览器公开环境变量"><span class="icon icon-link"></span></a>向浏览器公开环境变量</h3><div class="wrap-body">
|
||
<p>为了向浏览器公开变量，您必须在变量前加上 <code>NEXT_PUBLIC_</code> 前缀</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token assign-left variable">NEXT_PUBLIC_ANALYTICS_ID</span><span class="token operator">=</span>abcdefghijk
|
||
</span></code></pre>
|
||
<p><code>NEXT_PUBLIC_ANALYTICS_ID</code> 可以在此处使用，因为它的前缀是 <code>NEXT_PUBLIC_</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// pages/index.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">setupAnalyticsService</span> <span class="token keyword module">from</span> <span class="token string">'../lib/my-analytics-service'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">//</span>
|
||
</span><span class="code-line"><span class="token comment">// 它将在构建时转换为 `setupAnalyticsService('abcdefghijk')`</span>
|
||
</span><span class="code-line"><span class="token function">setupAnalyticsService</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_ANALYTICS_ID</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">HomePage</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">HomePage</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="路由"><a aria-hidden="true" tabindex="-1" href="#路由"><span class="icon icon-link"></span></a>路由</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>路由器将自动将名为 <code>index</code> 的文件路由到目录的根目录</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>pages/index.js</code></td><td><pur><code>/</code></pur></td></tr><tr><td align="left"><code>pages/blog/index.js</code></td><td><pur><code>/blog</code></pur></td></tr></tbody></table>
|
||
<p>路由器支持嵌套文件。如果创建嵌套文件夹结构，文件将以同样的方式自动路由</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>pages/blog/first-post.js</code></td><td><pur><code>/blog/first-post</code></pur></td></tr><tr><td align="left"><code>pages/dashboard/settings/username.js</code></td><td><pur><code>/dashboard/settings/username</code></pur></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
<p>动态路由</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>pages/blog/[slug].js</code></td><td><pur><code>/blog/:slug</code></pur> (<yel><code>/blog/hello-world</code></yel>)</td></tr><tr><td align="left"><code>pages/[username]/settings.js</code></td><td><pur><code>/:username/settings</code></pur> (<yel><code>/foo/settings</code></yel>)</td></tr><tr><td align="left"><code>pages/post/[...all].js</code></td><td><pur><code>/post/*</code></pur> (<yel><code>/post/2020/id/title</code></yel>)</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="具有动态路由的页面"><a aria-hidden="true" tabindex="-1" href="#具有动态路由的页面"><span class="icon icon-link"></span></a>具有动态路由的页面</h3><div class="wrap-body">
|
||
<p>如果您创建一个名为 <code>pages/posts/[pid].js</code> 的文件，那么它可以在 <code>posts/1</code>、<code>posts/2</code> 等处访问</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'next/router'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Post</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> pid <span class="token punctuation">}</span> <span class="token operator">=</span> router<span class="token punctuation">.</span><span class="token property-access">query</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Post: </span><span class="token punctuation">{</span>pid<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Post</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>useRouter</code> 获取动态路由参数 <code>pid</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="页面之间的链接"><a aria-hidden="true" tabindex="-1" href="#页面之间的链接"><span class="icon icon-link"></span></a>页面之间的链接</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Link</span></span> <span class="token keyword module">from</span> <span class="token string">'next/link'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">首页</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">关于我们</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog/hello-world<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 博文
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>/</code></td><td><pur><code>pages/index.js</code></pur></td></tr><tr><td align="left"><code>/about</code></td><td><pur><code>pages/about.js</code></pur></td></tr><tr><td align="left"><code>/blog/hello-world</code></td><td><pur><code>pages/blog/[slug].js</code></pur></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="链接到动态路径"><a aria-hidden="true" tabindex="-1" href="#链接到动态路径"><span class="icon icon-link"></span></a>链接到动态路径</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Link</span></span> <span class="token keyword module">from</span> <span class="token string">'next/link'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Posts</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> posts <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/blog/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>post<span class="token punctuation">.</span><span class="token property-access">slug</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 标题
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="url-对象"><a aria-hidden="true" tabindex="-1" href="#url-对象"><span class="icon icon-link"></span></a>URL 对象</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Link</span></span> <span class="token keyword module">from</span> <span class="token string">'next/link'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Posts</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> posts <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">href</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">pathname</span><span class="token operator">:</span> <span class="token string">'/blog/[slug]'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">slug</span><span class="token operator">:</span> posts<span class="token punctuation">.</span><span class="token property-access">slug</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 标题
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="动态路由"><a aria-hidden="true" tabindex="-1" href="#动态路由"><span class="icon icon-link"></span></a>动态路由</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>考虑以下页面 <code>pages/post/[pid].js</code>：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'next/router'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Post</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> pid <span class="token punctuation">}</span> <span class="token operator">=</span> router<span class="token punctuation">.</span><span class="token property-access">query</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Post: </span><span class="token punctuation">{</span>pid<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">Post</span>
|
||
</span></code></pre>
|
||
<p>到动态路由的客户端导航由 <code>next/link</code> 处理</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Link</span></span> <span class="token keyword module">from</span> <span class="token string">'next/link'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/post/abc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 转到 pages/post/[pid].js
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/post/abc?foo=bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 也转到 pages/post/[pid].js
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/post/abc/a-comment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 转到 pages/post/[pid]/[comment].js
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="多个动态路由"><a aria-hidden="true" tabindex="-1" href="#多个动态路由"><span class="icon icon-link"></span></a>多个动态路由</h3><div class="wrap-body">
|
||
<p>工作方式相同。 页面 <code>pages/post/[pid]/[comment].js</code> 将匹配路由 <code>/post/abc/a-comment</code> 并且它的查询对象将是：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span> <span class="token string-property property">"pid"</span><span class="token operator">:</span> <span class="token string">"abc"</span><span class="token punctuation">,</span> <span class="token string-property property">"comment"</span><span class="token operator">:</span> <span class="token string">"a-comment"</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="捕捉所有路由"><a aria-hidden="true" tabindex="-1" href="#捕捉所有路由"><span class="icon icon-link"></span></a>捕捉所有路由</h3><div class="wrap-body">
|
||
<p>可以通过在括号内添加三个点 (<code>...</code>) 来扩展动态路由以捕获所有路径，<code>pages/post/[...slug].js</code> 匹配 <code>/post/a</code>，也匹配 <code>/post/a/b</code>、<code>/post/a/b/c</code> 等</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// /post/a</span>
|
||
</span><span class="code-line"><span class="token punctuation">{</span> <span class="token string-property property">"slug"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// /post/a/b</span>
|
||
</span><span class="code-line"><span class="token punctuation">{</span> <span class="token string-property property">"slug"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="可选捕获所有路由"><a aria-hidden="true" tabindex="-1" href="#可选捕获所有路由"><span class="icon icon-link"></span></a>可选捕获所有路由</h3><div class="wrap-body">
|
||
<p>使用 <code>[[...slug]]</code>，<code>pages/post/[[...slug]].js</code> 将匹配 <code>/post</code>、<code>/post/a</code>、<code>/post/a/b</code> 等</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// GET `/post` (empty object)</span>
|
||
</span><span class="code-line"><span class="token punctuation">{</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// `GET /post/a` (single-element array)</span>
|
||
</span><span class="code-line"><span class="token punctuation">{</span> <span class="token string-property property">"slug"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// `GET /post/a/b` (multi-element array)</span>
|
||
</span><span class="code-line"><span class="token punctuation">{</span> <span class="token string-property property">"slug"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="事件执行调整页面"><a aria-hidden="true" tabindex="-1" href="#事件执行调整页面"><span class="icon icon-link"></span></a>事件执行调整页面</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'next/router'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ReadMore</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> router<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'/about'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 点击这里阅读更多
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="浅路由"><a aria-hidden="true" tabindex="-1" href="#浅路由"><span class="icon icon-link"></span></a>浅路由</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'next/router'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 当前网址为“/”</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Page</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 始终在第一次渲染后进行导航</span>
|
||
</span><span class="code-line"> router<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'/?counter=10'</span><span class="token punctuation">,</span> <span class="token keyword nil">undefined</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">shallow</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// counter 变了！</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>router<span class="token punctuation">.</span><span class="token property-access">query</span><span class="token punctuation">.</span><span class="token property-access">counter</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="注意事项"><a aria-hidden="true" tabindex="-1" href="#注意事项"><span class="icon icon-link"></span></a>注意事项</h4>
|
||
<p>浅路由仅适用于当前页面中的 URL 更改。 例如，假设我们有另一个名为 <code>pages/about.js</code> 的页面，并且您运行以下命令：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line">router<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'/?counter=10'</span><span class="token punctuation">,</span> <span class="token string">'/about?counter=10'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">shallow</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>由于这是一个新页面，它会卸载当前页面，加载新页面并等待数据获取，即使我们要求进行浅层路由</p>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://nextjs.org/docs/getting-started">Next.js 文档</a></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.0" defer></script><script src="../js/fuse.min.js?v=1.8.0" defer></script><script src="../js/main.js?v=1.8.0" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|