企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] ## 概述 * [**静态生成 (推荐)**](https://www.nextjs.cn/docs/basic-features/pages#static-generation-recommended):HTML 在**构建时**生成,并在每次页面请求(request)时重用。 * [**服务器端渲染**](https://www.nextjs.cn/docs/basic-features/pages#server-side-rendering):在**每次页面请求(request)时**重新生成 HTML。 ## 路由 pages 模式 ``` my-next-app/ ├── pages/ │ ├── index.js │ ├── about.js │ └── api/ │ └── hello.js ``` app 模式 ```my-next-app/ ├── app/ │ ├── layout.js │ ├── page.js │ ├── about/ │ │ └── page.js // 路由 /about │ └── dashboard/ │ ├── layout.js │ └── page.js ``` > app 模式下, 路由只会读该模式下的 page.tsx ## 约定文件 ``` layout 用于段及其子级的共享布局 page 路由的唯一页面,并使路由可公开访问 loading 用于段及其子级的加载页面 not-found 用于段及其子级的 404 页面 error 用于段及其子级的错误页面 global-error 全局错误页面 route 服务器端 API 端点 template 专门的重新渲染布局的组件 default 并行路由 的回退 UI ``` ## 静态渲染 ### 页面内容取决与外部数据 ``` export default function Blog({ posts }: { posts: any[] }) { return ( <ul> {posts.map((post) => ( <li>{post.title}</li> ))} </ul> ) } // 此函数在构建时被调用 export async function getStaticProps() { // 调用外部 API 获取博文列表 const res = await fetch('https://.../posts') const posts = await res.json() // 通过返回 { props: { posts } } 对象,Blog 组件 // 在构建时将接收到 `posts` 参数 return { props: { posts, }, } } ``` ### 页面路径取决于外部数据 如 `pages/posts/[id].js` ``` // 此函数在构建时被调用 export async function getStaticPaths() { // 调用外部 API 获取博文列表 const res = await fetch('https://.../posts') const posts = await res.json() // 据博文列表生成所有需要预渲染的路径 const paths = posts.map((post) => ({ params: { id: post.id }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } ``` ## 服务器端渲染 你需要`export`一个名为`getServerSideProps`的`async`函数。服务器将在每次页面请求时调用此函数``` ``` function Page({ data }) { // Render data... } // 在运行时,而非编译时执行 export async function getServerSideProps() { // Fetch data from external API const res = await fetch(`https://.../data`) const data = await res.json() // Pass data to the page via props return { props: { data } } } export default Page ```