我看到了this question,但最受欢迎的答案是使用一些基于Akamai的配置,我不会与Akamai一起主持这次会议。
我有一个带有package.json
的reaction/Nextjs,其scripts
如下所示:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "next export"
},
当我跑步的时候:
npm run export
我得到了:
> myapp-website@0.1.0 export
> next export
info - using build directory: /Users/myuser/workspace/myappsite/myapp-website/.next
info - Copying "static build" directory
info - No "exportPathMap" found in "/Users/myuser/workspace/myappsite/myapp-website/next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
Read more: https://nextjs.org/docs/messages/export-image-api
at /Users/myuser/workspace/myappsite/myapp-website/node_modules/next/dist/export/index.js:149:23
at async Span.traceAsyncFn (/Users/myuser/workspace/myappsite/myapp-website/node_modules/next/dist/trace/trace.js:79:20)
当我检查next.config.js
文件时,我看到:
/**@type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
我需要做什么才能成功运行npm run export
?这里发生了什么?
2条答案
按热度按时间lmvvr0a81#
在next.config.js中,关闭镜像优化功能,然后运行NPM构建和NPM导出。导出不支持镜像优化,因为不会有任何nextjs服务器来优化镜像。导出后,您可以使用第三方库来优化您的图像或从网站加载您的图像,从而优化您的图像。
添加此配置文件-
vngu2lb82#
我们必须记住的是Next.js优化是如何在幕后工作的。映像不是在构建过程中优化的,它们是按需优化的。当然,要做到这一点,服务器需要运行。
在docs中提到:
映像不能在构建时使用下一次导出进行优化,只能按需进行。要将NEXT/IMAGE用于NEXT EXPORT,您需要使用不同于默认加载器的加载器。在讨论中阅读更多内容。
运行
next export
不会运行服务器。相反,您正在尝试从next.js项目中导出静态HTML(例如,在GitHub页面上运行等)。NEXT EXPORT允许您将Next.js应用程序导出为静态HTML,它可以独立运行,而不需要Node.js服务器。
将会有一些不受支持的功能,图像优化就是一个例子。
您可以按如下方式更改配置:
或
通过使用
imgix
加载程序,您可以将该任务分流到imgix服务器,它们将为您提供映像。通过在配置中使用unoptimized : true
,您将禁用映像优化。这样,您就不需要服务器了。