Other Page
) } ``` 现在我们运行 `npm run build` 执行构建，然后对导出的 `out` 文件夹起一个服务（VSCode 可以用 Live Server 这个插件），你会发现它的表现类似于 SPA：  这是为了避免在客户端加载不必要的 JavaScript 代码，从而减小 bundle 的大小，实现更快的页面加载。 但它跟传统的 SPA 还不一样。因为传统 SPA 的 HTML 是一个“空的”，只有一个可以挂载的根节点比如这样： ```html ``` 但 Next.js 构建出来的无论是服务端组件还是客户端组件，都是有 HTML 内容的。 #### 2.3. 图片优化 在使用静态导出的时候，并不能使用带有默认 loader 的 `next/image` 组件，举个例子： ```javascript // app/page.js import Image from 'next/image' import profilePic from './me.png' export default function Page() { return (
}
```
#### 2.4. 路由处理程序
路由处理程序在运行 `next build` 的时候会渲染一个静态的响应。只有在 `GET` 请求被支持。这可以用于生成静态的 HTML、JSON、TXT 或者其他文件。举个例子：
```javascript
// app/data.json/route.js
export async function GET() {
return Response.json({ name: 'Lee' })
}
```
`app/data.json/rout.js` 会在 `next build` 的时候渲染成一个静态的名为 `data.json`的文件：
如果你需要从传入的请求中读取动态值，那就不能使用静态导出了。
#### 2.5. 浏览器 API
在运行 `next build` 的时候，客户端组件会被预渲染成 HTML。因为 Web APIs 像 `window`、`localStorage` 和 `navigator` 在服务端是不可用的，所以你需要保证仅在浏览器中运行的时候才访问这些 API，举个例子：
```javascript
'use client';
import { useEffect } from 'react';
export default function ClientComponent() {
useEffect(() => {
// 现在可以访问 `window`
console.log(window.innerHeight);
}, [])
return ...;
}
```
### 3. 不支持的功能
需要 Nodejs server 的功能或者在构建过程中需要计算的动态逻辑都是不支持的，具体有：
* [Dynamic Routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) 中 `dynamicParams: true`
* [Dynamic Routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) 没有使用`generateStaticParams()`
* [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) 依赖传入的请求
* [Cookies](https://nextjs.org/docs/app/api-reference/functions/cookies)
* [Rewrites](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)
* [Redirects](https://nextjs.org/docs/app/api-reference/next-config-js/redirects)
* [Headers](https://nextjs.org/docs/app/api-reference/next-config-js/headers)
* [Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware)
* [Incremental Static Regeneration](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)
* [Image Optimization](https://nextjs.org/docs/app/building-your-application/optimizing/images) 使用默认 loader
* [Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode)
在 `next dev` 的时候尝试使用这些功能都会导致错误。
### 4. 部署
使用静态导出，Next.js 可以部署和托管在任何能处理 HTML、CSS 、JS 静态资源的 Web 服务器上。
运行 `next build` 的时候，Next.js 会生成静态文件到 `out` 文件夹下，举个例子，假如你有这些路由：
* `/`
* `/blog/[id]`
运行 `next build`后，Next.js 会生成以下文件：
* `/out/index.html`
* `/out/404.html`
* `/out/blog/post-1.html`
* `/out/blog/post-2.html`
有 `post-1.html、post-2.html` 这些文件是因为定义了 `generateStaticParams`，不使用该函数也无法静态导出。
但此时路由跳转的时候会有一个问题，就比如从 `/`跳转到 `/other`，第一次没有问题，因为页面类似于 SPA，但是刷新 `/other`就会导致错误，原本的 `/other` 被编译成了 `other.html`，访问 `/other.html` 才会正常访问。让我们看下演示：
为了解决这个问题，如果你使用了比如 Nginx，那你可以配置一个从传入请求到正确文件的重写：
```javascript
# nginx.conf
server {
listen 80;
server_name acme.com;
root /var/www/out;
location / {
try_files $uri $uri.html $uri/ =404;
}
# 当配置 `trailingSlash: false`，这是必要的
# 当配置 `trailingSlash: true`，可以省略
location /blog/ {
rewrite ^/blog/(.*)$ /blog/$1.html break;
}
error_page 404 /404.html;
location = /404.html {
internal;
}
}
```
### 参考链接
1.