--- theme: serene-rose --- > NextJs v14 与 v13 存在较大差异，v14 提供了两种路由模式：`App Router` 和 `Page Router`（v13）, 如果继续沿用 `Page Router`，可以参考这篇文件，相反，请移至 [《NextJs 14 从入门到精通》](https://juejin.cn/post/7386873708601032754) ## 简介基于React的framework框架，它包含了SSR、ISG、SSG渲染等，非常简单方便，它抽象了自动配置工具，无需关心工程化配置，专注于coding逻辑 * 安装 npx create-next-app\@latest \[project] ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e05c79f5dc524bcb8385b79018945912~tplv-k3u1fbpfcp-zoom-1.image#?w=638\&h=1170\&s=140982\&e=png\&b=141414) ## Core API ### 静态路由根据pages下的文件/文件夹自动配置路由 /index.tsx localhost:3000/ /about.tsx localhost:3000/about /help localhost:3000/help ### 动态路由比如 posts文件夹下： * \[...params].tsx/ts * * localhost:3000/posts/a，localhost:3000/posts/a/b，localhost:3000/posts/a/b/... * \[id].tsx/ts * * localhost:3000/posts/1，localhost:3000/posts/\[id] * \[\[id]].tsx/ts 可有可无 * * localhost:3000/posts，localhost:3000/posts/\[id] * \[id]/index.tsx 或者 \[id]/page.tsx localhost:3000/posts/\[id] (auth) /login/index.tsx --> localhost:3000/login ### 生成无数据静态网页 next export ### SSG(静态生成) / ISR(增量静态生成) * 通过 getStaticPaths 和 getStatifcProps 这两个方法在服务端build时生成静态页面 ```javacript // pages/posts/[id].tsx // react 组件 const Page = ({ data }: any) => { return (

{data}

); }; export default Page; /*********** 静态生成：SSG *********/ export async function getStaticProps(context: NextPageContext) { const { id } = context.params; const data = await fetch(`https://api/${id}/`).then(data => data.json()); return { props: { data }, }; } export async function getStaticPaths() { return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallback: false, // ‘blocking’ / true / false // ‘blocking’ 按需生成 // false 没有静态页面，则404 // true 自己返回 loading 等待静态生成 }; } ``` * getStaticPaths 通过配置，我们在dev/build时，预先生成相关的静态页面，这里生成如下： * * localhost:3000/posts/1 和 localhost:3000/posts/2 * fallback * * * false：localhost:3000/posts/3 --> 404 * blocking: localhost:3000/posts/3 --> 访问时生成静态页面，用户等待静态页面生成完成时，才渲染页面（服务端压力增加，不要使用）， * true：localhost:3000/posts/3 --> 访问时，用户端可以监控路由的isFallback，先显示loading提示，待静态页面生成后，显示渲染的内容（服务端压力增加，不要使用） * * * * ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c00fab81c7145f1afcd13514d98ca3b~tplv-k3u1fbpfcp-zoom-1.image#?w=774\&h=586\&s=68436\&e=png\&b=181818) * * **说白了，就是 blocking 和 true，是** **按需** **生成静态，当用户访问路由时，才会生成，这样效率和性能都不好，不要使用，** * **ISR：增量静态色生成（不建议使用）** * * **自动触发：getStaticProps设置** **revalidata** **，比如设置为10，表示当前页面在服务端的超时时间为10s，当用户访问时，如果没超过10s中，则使用原来的生成静态页面，否则重新生成新的静态页面** * * * ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a58a494f5704b60bffcab12c246ad57~tplv-k3u1fbpfcp-zoom-1.image#?w=1700\&h=406\&s=107523\&e=png\&b=181818) * * **手动触发** * * * **不建议使用** *** ### SSR 使用 getServerSideProps // pages/posts/[id].tsx // react 组件 const Page = ({ data }: any) => { return (

{data}

); }; // SSR，这里的代码在server端执行 export async function getServerSideProps(context: NextPageContext) { const { id } = context.params; const data = await fetch(`https://api/${id}/`).then(data => data.json()); return { props: { data }, }; } ### a component has only getServerSideProps or getStaticProps 不能同时存在一个组件中，说白了，要么是SSG，要么是SSR ## Hit the road ### FileSystem router ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e05cfde32104240af25db9ca87fdc3e~tplv-k3u1fbpfcp-zoom-1.image#?w=1088\&h=490\&s=224585\&e=png\&b=3b0337) #### \[id] 与 \[..slug] all exist ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ffa71fe55ed4d91aa53cb2461f8fccc~tplv-k3u1fbpfcp-zoom-1.image#?w=476\&h=356\&s=39748\&e=png\&b=131313) **会优先匹配 \[id]** * -> \[eventId] * -> \[...slug] #### \[...slug] 获取参数 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6901afae1ada4e62a6aad2f5ec82a93c~tplv-k3u1fbpfcp-zoom-1.image#?w=1170\&h=756\&s=142513\&e=png\&b=181818) #### Link和手动设置路由 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fedc7f91a3a49039c24270cca5d0128~tplv-k3u1fbpfcp-zoom-1.image#?w=1932\&h=1430\&s=371034\&e=png\&b=171717)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3159483d9e4488996c774150b84220f~tplv-k3u1fbpfcp-zoom-1.image#?w=1178\&h=774\&s=91918\&e=png\&b=181818) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94d50a64540b4e618aaaab75c3558652~tplv-k3u1fbpfcp-zoom-1.image#?w=1946\&h=1124\&s=330560\&e=png\&b=171717) ### 预渲染 #### why * 传统 React：应用返回的 HTML 文件中，不包含应用的信息，因为页面是在客户端进行渲染的，所以服务端返回的源码通常只有一个 id 为 root 的 div 标签，不利于做 SEO（搜索引擎优化） * pre-rendering：浏览器收到的 HTML 文件源码是包含了页面信息的代码，Good for SEO ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac567b8182884cbeaf08dd8182dd5786~tplv-k3u1fbpfcp-zoom-1.image#?w=1134\&h=647\&s=230658\&e=png\&b=3d0339) #### - pre-rendering will not execute useEffect in server #### SSG SSG 是静态站点生成，就是在文件打包阶段，预先生成页面 * Next.js 默认会预渲染所有没有动态数据的页面，而动态的数据还是像 React 一样在客户端渲染的 * 如果要在 HTML 源码中展现动态数据，可以使用 page 下 getStaticProps 方法。这个方法是跑在服务端环境下的，可以在服务端获取数据并渲染，并且客户端不会收到方法内任何的代码。此外，Next.js 拓展了一些功能，比如 fetch 是浏览器的接口，在服务端是不能用的，而在getStaticProps 方法中是可以使用 fetch API 的（通过 node-fetch 这个库实现的。（Node.js18.0.0 版本开始原生支持了 fetch 方法） ##### getStaticProps ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a54e7c2c6f94c7abba9eb5a8986583a~tplv-k3u1fbpfcp-zoom-1.image#?w=1191\&h=432\&s=190500\&e=png\&b=3b0337) export type GetStaticPropsResult

= | { props: P; revalidate?: number | boolean } | { redirect: Redirect; revalidate?: number | boolean } | { notFound: true; revalidate?: number | boolean } * props 是服务端获取的需要传给组件的数据，revalidate 可以定义生产环境下 getStaticProps 调用的间隔秒数，600就是600秒，10分钟。测试环境下这个配置项无效，每次访问页面都会触发此方法。而后两种情况适用于获取数据失败时，引导用户进行下一步操作，重定向或直接返回404错误。此外如果需要在 getStaticProps 中访问路径参数，可以在方法的 context 参数的 params 属性获取 ##### getStaticPaths 上面指的没有动态数据的页面，也不能是动态路由（文件名带\[]的js），否则也不会自动生成静态页面。如果需要生成静态页面，需要使用 getStaticPaths 方法。 * getStaticPaths 方法定义了一组需要生成静态页面的列表，每项数据都会调用 getStaticProps 来获取数据，所以要使用 getStaticPaths 一定先要有定义 getStaticProps export async function getStaticPaths() { return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallback: false, } } #### SSR SSR 是服务端渲染，getServerSideProps 方法可以针对每次请求作出处理，适用于数据变化比较频繁的页面 * **getStaticProps 与 getServerSideProps 只能二选一** * **getServerSideProps 也是运行在服务器上的方法，这个方法的参数 context 可以完整获取请求的所有数据** * **没有 revalidate 属性，因为每次请求都会重新渲染** export type GetServerSidePropsContext< Q extends ParsedUrlQuery = ParsedUrlQuery, D extends PreviewData = PreviewData > = ({ req: IncomingMessage & { cookies: NextApiRequestCookies } res: ServerResponse params?: Q query: ParsedUrlQuery preview?: boolean previewData?: D resolvedUrl: string locale?: string locales?: string[] defaultLocale?: string }) => GetServerSidePropsResult export type GetServerSidePropsResult

= | { props: P | Promise

} | { redirect: Redirect } | { notFound: true } #### 不适合预渲染的情况以下三种情况不适合使用服务端预渲染： * 数据变化非常频繁的页面（比如股票数据） * 与用户身份高度耦合的页面（比如用户信息） * 页面中只有某一小部分数据不同的情况碰到这些情况，还是在客户端使用 useEffect 中 fetch 来获取数据，Next.js 团队也编写了一个React 钩子库 SWR（）来简化客户端请求 import useSWR from 'swr' const fetcher = (...args) => fetch(...args).then((res) => res.json()) function Profile() { const { data, error } = useSWR('/api/profile-data', fetcher) if (error) return

Failed to load

if (!data) return

return (

{data.name}

{data.bio}

) } ### SEC-Head+Meta #### 统一加上Head信息 * 所有页面都都会统一加上head信息 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d4a6d15aee24da5a4721c256ffcecee~tplv-k3u1fbpfcp-zoom-1.image#?w=1104\&h=1048\&s=152865\&e=png\&b=181818)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f9d6e05ec7f4e6abac5a8e563818b4f~tplv-k3u1fbpfcp-zoom-1.image#?w=655\&h=408\&s=60677\&e=png\&b=fcfcfc) #### 页面独立Head * 页面中加入的Head 会 merge \_app 中的 head，做到个性化 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dca746a975054420af95c6cc06c37c86~tplv-k3u1fbpfcp-zoom-1.image#?w=912\&h=848\&s=108054\&e=png\&b=181818)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7be2f05e5d474e18bee13fb36eaa0ef9~tplv-k3u1fbpfcp-zoom-1.image#?w=718\&h=402\&s=81562\&e=png\&b=ffffff) #### 多个Head 会 merge ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09380d5fd08e4f9bac7e85080b4a1332~tplv-k3u1fbpfcp-zoom-1.image#?w=794\&h=958\&s=105780\&e=png\&b=181818)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aea072670ba84e91a76e0620a0790e69~tplv-k3u1fbpfcp-zoom-1.image#?w=557\&h=124\&s=26920\&e=png\&b=fafafa) #### 根据数据动态设置Head ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a472aeba4bb14919b1be39d5d536b078~tplv-k3u1fbpfcp-zoom-1.image#?w=1220\&h=1158\&s=181798\&e=png\&b=181818) #### \_document.js \_app.js 相当于 body 中的内容，\_document.js 相当于整个 HTML 文档 * **\_app.js 会进入到 div#** **\_next 容器下（默认自动创建）** import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return (

) } * **MyDocument** import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return (

); } } export default MyDocument; ### ### 图片优化 Next.js 提供了优化图片的方案——Image 组件，使用 Image 组件有四点好处： * **优化图片大小：webp格式** * * 对各个设备使用合适的尺寸与格式（使用Chrome访问页面时，图片会转换成webp格式） * **防止CLS**（累计布局偏移） * **懒加载**：图片在视图中才会被加载 * **自定义图片尺寸，width、height** * * Next.js 会根据 Image 的 width 与 height 值，在页面请求服务端时，转换并**缓存**相应大小的图片 import Image from 'next/image' export default function About(props) { return <>

} *** *** ### API 路由 /pages/api 文件下的 JS 文件不会导出页面组件，Next.js 会将这些文件映射成 /api/\* 的 API 端点，与文件路由创建一样，也支持动态路由 * Wonderful，next会缓存get请求，自动开启Etag，下次请求进行协商缓存Etag，当服务端数据又变化，Etag会变化 -> 200，没有变化 --> 304 export default function handler(req, res) { if (req.method === 'POST') { // 处理POST请求 } else { // 处理其他HTTP方法请求 // res.status(200).json({ message: 'ok' }); } } * **类型** ``` export declare type NextApiHandler = (req: NextApiRequest, res: NextApiResponse) => unknown | Promise; quest extends IncomingMessage { /** * Object of `query` values from url */ query: Partial<{ [key: string]: string | string[]; }>; /** * Object of `cookies` from header */ cookies: Partial<{ [key: string]: string; }>; body: any; env: Env; preview?: boolean; /** * Preview data set on the request, if any * */ previewData?: PreviewData; } export declare type NextApiResponse = ServerResponse & { /** * Send data `any` data in response */ send: Send; /** * Send data `json` data in response */ json: Send; status: (statusCode: number) => NextApiResponse; redirect(url: string): NextApiResponse; redirect(status: number, url: string): NextApiResponse; /** * Set preview data for Next.js' prerender mode */ setPreviewData: (data: object | string, options?: { /** * Specifies the number (in seconds) for the preview session to last for. * The given number will be converted to an integer by rounding down. * By default, no maximum age is set and the preview session finishes * when the client shuts down (browser is closed). */ maxAge?: number; /** * Specifies the path for the preview session to work under. By default, * the path is considered the "default path", i.e., any pages under "/". */ path?: string; }) => NextApiResponse; /** * Clear preview data for Next.js' prerender mode */ clearPreviewData: (options?: { path?: string; }) => NextApiResponse; revalidate: (urlPath: string, opts?: { unstable_onlyGenerated?: boolean; }) => Promise; }; ``` * **API路由映射** * * /pages/api/feedback/index.js <===> GET api/feedback * * * /pages/api/posts/\[postId].js <===> GET api/posts/12345 * * /pages/api/feedback/index.js <===> POST api/feedback // GET function loadFeedbackHandler() { fetch('/api/feedback') .then(response => response.json()) .then(data => { setFeedbackItems(data.data); }); } // POST fetch('/api/feedback', { method: 'POST', body: JSON.stringify(reqBody), headers: { 'Content-Type': 'application/json', }, }) .then(response => response.json()) .then(data => console.log(data)); #### MongoDB ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f6d2deacaeb41b39fda7ece7733694d~tplv-k3u1fbpfcp-zoom-1.image#?w=1226\&h=638\&s=213219\&e=png\&b=faf9f9) **使用云MongoDB** 注册 --> 创建集群 Cluster ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b25f19fbb4248ccbf137d963ccaab50~tplv-k3u1fbpfcp-zoom-1.image#?w=1065\&h=515\&s=94684\&e=png\&b=ffffff) **Database Access 创建数据库 user** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e568a87f29d4076bae0bc3ab10d822c~tplv-k3u1fbpfcp-zoom-1.image#?w=1044\&h=649\&s=90950\&e=png\&b=ffffff) #### Network Access #### RESTFUL * **npm i -S mongodb** * **连接URL** * * 'mongodb+srv://username:@cluster0.jdiygge.mongodb.net/\?retryWrites=true\&w=majority' * **await MongoClient.connect(url) ==> promise** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77b3afb1d73b480595074ef3c8a1e26b~tplv-k3u1fbpfcp-zoom-1.image#?w=402\&h=366\&s=29266\&e=png\&b=131313) * **db 工具** // /helpers/db-util import { MongoClient, ObjectId } from 'mongodb'; export async function connectDatabase() { const client = await MongoClient.connect( 'mongodb+srv://xxx:xxxxxx@cluster0.jdiygge.mongodb.net/xxx?retryWrites=true&w=majority' ); return client; } export async function insertDocument(client, collection, document) { const db = client.db(); const result = await db.collection(collection).insertOne(document); return result; } export async function getAllDocuments(client, collection, sort) { const db = client.db(); const documents = await db.collection(collection).find().sort(sort).toArray(); return documents; } export async function getDocumentById(client, collection, id) { const db = client.db(); const document = await db .collection(collection) .find({ _id: new ObjectId(id) }) .toArray(); return document[0]; } export async function deleteDocumentById(client, collection, id) { const db = client.db(); const document = await db.collection(collection).deleteOne({ _id: new ObjectId(id) }); const { deletedCount } = document; return deletedCount > 0; } * **API** * * **/api/list GET & POST** * **/api/detail/\[id] DELETE** // /api/list import { connectDatabase, getAllDocuments, insertDocument } from '../../helpers/db-util'; export default async function handler(req, res) { let client; try { client = await connectDatabase(); } catch (error) { res.status(500).json({ message: 'Connecting to the database failed!' }); return; } if (req.method === 'GET') { try { // products - table const documents = await getAllDocuments(client, 'products', { _id: -1 }); res.status(200).json({ data: documents }); console.log('查询所有数据', documents); } catch (error) { res.status(500).json({ message: 'Getting comments failed.' }); } } else { const { text } = req.body; if (!text || !text.trim()) { res.status(422).json({ message: 'Invalid input.' }); client.close(); return; } const newProduct = { text }; try { const result = await insertDocument(client, 'products', newProduct); console.log('insert success:', result.insertedId); res.status(201).json({ message: 'Added success.', data: { _id: result.insertedId, ...newProduct } }); } catch (error) { res.status(500).json({ message: 'Inserting comment failed!' }); } } client.close(); } // /api/detial/[id] import { connectDatabase, getDocumentById, deleteDocumentById } from '../../../helpers/db-util'; export default async function handler(req, res) { let client; try { client = await connectDatabase(); } catch (error) { res.status(500).json({ message: 'Connecting to the database failed!' }); return; } if (req.method === 'DELETE') { try { const { id } = req.query; console.log(`delete id: ${id}`); const response = await getDocumentById(client, 'products', id); if (!response) { res.status(500).json({ message: 'there is no data by id', result: false }); } else { const result = await deleteDocumentById(client, 'products', id); if (result) { res.status(200).json({ message: 'delete success', result: true }); } else { res.status(500).json({ message: 'there is no data by id', result: false }); } } } catch (e) { console.log(e); res.status(500).json({ message: 'Delete failed!', result: false }); } } client.close(); } * **client code** // GET try { const res = await fetch('http://localhost:3000/api/list'); const resData = await res.json(); data = resData.data; } catch (e) { console.log(e); } // POST try { setLoading(true); const result = await fetch('/api/list', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', }, }); const res = await result.json(); setList([...list, res.data]); inputRef.current.value = ''; } catch (err) { console.error(err); } finally { setLoading(false); } // DELETE try { const response = await fetch(`/api/detail/${id}`, { method: 'DELETE', }); const { result } = await response.json(); if (result) { setList(prev => prev.filter(item => item._id !== id)); } } catch (e) { console.error(e); } ## 部署 ### 构建构建 Next.js 应用有两种方式 * **标准构建：next build，前端+nodejs** * * 使用这种方式构建，我们会得到优化后的前端项目 + 一个 NodeJS 服务端程序。这个服务端程序提供了 API 路由、SSR 与页面重验证等功能。所以如果要部署这个应用，需要服务器有NodeJS 环境 * **完全静态构建：next export，只有前端** * * 使用这种方式生成的代码，只会包含纯前端的内容，HTML、CSS、JS 以及静态资源。没有 NodeJS 服务端程序，所以部署可以不需要 NodeJS 环境。当然这样的话，API路由、SSR 等 Next.js 提供的特性就不能使用了 ### 配置 **next.config.js** /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig 这个文件中的代码也是服务端代码，在构建过程中以及构建生成的 NodeJS 服务端程序中会使用到。此外这个文件不会被 Webpack, Babel 或 TypeScript 处理，所以确保使用与机器NodeJS 版本相匹配的语法完整的配置项接口如下，不过一般还是看官方文档（）根据具体需求来配置 export interface NextConfig extends Record { exportPathMap?: (defaultMap: ExportPathMap, ctx: { dev: boolean; dir: string; outDir: string | null; distDir: string; buildId: string; }) => Promise | ExportPathMap; /** * Internationalization configuration * * @see [Internationalization docs](https://nextjs.org/docs/advanced-features/i18n-routing) */ i18n?: I18NConfig | null; /** * @since version 11 * @see [ESLint configuration](https://nextjs.org/docs/basic-features/eslint) */ eslint?: ESLintConfig; /** * @see [Next.js TypeScript documentation](https://nextjs.org/docs/basic-features/typescript) */ typescript?: TypeScriptConfig; /** * Headers allow you to set custom HTTP headers for an incoming request path. * * @see [Headers configuration documentation](https://nextjs.org/docs/api-reference/next.config.js/headers) */ headers?: () => Promise; /** * Rewrites allow you to map an incoming request path to a different destination path. * * @see [Rewrites configuration documentation](https://nextjs.org/docs/api-reference/next.config.js/rewrites) */ rewrites?: () => Promise; /** * Redirects allow you to redirect an incoming request path to a different destination path. * * @see [Redirects configuration documentation](https://nextjs.org/docs/api-reference/next.config.js/redirects) */ redirects?: () => Promise; /** * @see [Moment.js locales excluded by default](https://nextjs.org/docs/upgrading#momentjs-locales-excluded-by-default) */ excludeDefaultMomentLocales?: boolean; /** * Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case * * @see [Custom Webpack Config documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) */ webpack?: NextJsWebpackConfig | null; /** * By default Next.js will redirect urls with trailing slashes to their counterpart without a trailing slash. * * @default false * @see [Trailing Slash Configuration](https://nextjs.org/docs/api-reference/next.config.js/trailing-slash) */ trailingSlash?: boolean; /** * Next.js comes with built-in support for environment variables * * @see [Environment Variables documentation](https://nextjs.org/docs/api-reference/next.config.js/environment-variables) */ env?: Record; /** * Destination directory (defaults to `.next`) */ distDir?: string; /** * The build output directory (defaults to `.next`) is now cleared by default except for the Next.js caches. */ cleanDistDir?: boolean; /** * To set up a CDN, you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on. * * @see [CDN Support with Asset Prefix](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) */ assetPrefix?: string; /** * By default, `Next` will serve each file in the `pages` folder under a pathname matching the filename. * To disable this behavior and prevent routing based set this to `true`. * * @default true * @see [Disabling file-system routing](https://nextjs.org/docs/advanced-features/custom-server#disabling-file-system-routing) */ useFileSystemPublicRoutes?: boolean; /** * @see [Configuring the build ID](https://nextjs.org/docs/api-reference/next.config.js/configuring-the-build-id) */ generateBuildId?: () => string | null | Promise; /** @see [Disabling ETag Configuration](https://nextjs.org/docs/api-reference/next.config.js/disabling-etag-generation) */ generateEtags?: boolean; /** @see [Including non-page files in the pages directory](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions) */ pageExtensions?: string[]; /** @see [Compression documentation](https://nextjs.org/docs/api-reference/next.config.js/compression) */ compress?: boolean; /** * The field should only be used when a Next.js project is not hosted on Vercel while using Vercel Analytics. * Vercel provides zero-configuration analytics for Next.js projects hosted on Vercel. * * @default '' * @see [Next.js Analytics](https://nextjs.org/analytics) */ analyticsId?: string; /** @see [Disabling x-powered-by](https://nextjs.org/docs/api-reference/next.config.js/disabling-x-powered-by) */ poweredByHeader?: boolean; /** @see [Using the Image Component](https://nextjs.org/docs/basic-features/image-optimization#using-the-image-component) */ images?: ImageConfig; /** Configure indicators in development environment */ devIndicators?: { /** Show "building..."" indicator in development */ buildActivity?: boolean; /** Position of "building..." indicator in browser */ buildActivityPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; }; /** * Next.js exposes some options that give you some control over how the server will dispose or keep in memory built pages in development. * * @see [Configuring `onDemandEntries`](https://nextjs.org/docs/api-reference/next.config.js/configuring-onDemandEntries) */ onDemandEntries?: { /** period (in ms) where the server will keep pages in the buffer */ maxInactiveAge?: number; /** number of pages that should be kept simultaneously without being disposed */ pagesBufferLength?: number; }; /** @see [`next/amp`](https://nextjs.org/docs/api-reference/next/amp) */ amp?: { canonicalBase?: string; }; /** * Deploy a Next.js application under a sub-path of a domain * * @see [Base path configuration](https://nextjs.org/docs/api-reference/next.config.js/basepath) */ basePath?: string; /** @see [Customizing sass options](https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options) */ sassOptions?: { [key: string]: any; }; /** * Enable browser source map generation during the production build * * @see [Source Maps](https://nextjs.org/docs/advanced-features/source-maps) */ productionBrowserSourceMaps?: boolean; /** * By default, Next.js will automatically inline font CSS at build time * * @default true * @since version 10.2 * @see [Font Optimization](https://nextjs.org/docs/basic-features/font-optimization) */ optimizeFonts?: boolean; /** * The Next.js runtime is Strict Mode-compliant. * * @see [React Strict Mode](https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode) */ reactStrictMode?: boolean | null; /** * Add public (in browser) runtime configuration to your app * * @see [Runtime configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) */ publicRuntimeConfig?: { [key: string]: any; }; /** * Add server runtime configuration to your app * * @see [Runtime configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) */ serverRuntimeConfig?: { [key: string]: any; }; /** * Next.js automatically polyfills node-fetch and enables HTTP Keep-Alive by default. * You may want to disable HTTP Keep-Alive for certain `fetch()` calls or globally. * * @see [Disabling HTTP Keep-Alive](https://nextjs.org/docs/api-reference/next.config.js/disabling-http-keep-alive) */ httpAgentOptions?: { keepAlive?: boolean; }; /** * During a build, Next.js will automatically trace each page and its dependencies to determine all of the files * that are needed for deploying a production version of your application. * * @see [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing) */ outputFileTracing?: boolean; /** * Timeout after waiting to generate static pages in seconds * * @default 60 */ staticPageGenerationTimeout?: number; /** * Add `"crossorigin"` attribute to generated `