使用 Nextjs 在 Netlify 上部署 Storybook
Posted
技术标签:
【中文标题】使用 Nextjs 在 Netlify 上部署 Storybook【英文标题】:Deploy Storybook on Netlify with Nextjs 【发布时间】:2021-06-19 16:39:02 【问题描述】:我正在尝试在 Netlify 上部署我的 Storybook,我正在使用 Next.js 框架,但每次都失败,我不知道出了什么问题
Netlify 配置:
构建命令:npm run build-storybook
发布目录:storybook-static
我的 package.json:
"homepage": "https://github.com/alexCoding42/tailwind-storybook",
"name": "tailwind-storybook",
"version": "0.1.0",
"private": true,
"scripts":
"dev": "next dev",
"build": "next build",
"start": "next start",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
,
"dependencies":
"next": "10.0.9",
"react": "17.0.1",
"react-dom": "17.0.1"
,
"devDependencies":
"@babel/core": "^7.13.10",
"@netlify/plugin-nextjs": "^3.0.3",
"@storybook/addon-actions": "^6.2.0-alpha.22",
"@storybook/addon-essentials": "^6.2.0-alpha.22",
"@storybook/addon-links": "^6.2.0-alpha.22",
"@storybook/react": "^6.2.0-alpha.22",
"@types/node": "^14.14.35",
"@types/react": "^17.0.3",
"babel-loader": "^8.2.2",
"gh-pages": "^3.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.2.1",
"tailwindcss": "^2.0.4",
"typescript": "^4.2.3"
我在 Netlify 上遇到的错误:
Plugin "@netlify/plugin-nextjs" internal error
Error: No static assets found in .next dist (aka no /.next/static). Please check your project configuration. Your next.config.js must be one of serverless or experimental-serverless-trace. Your build command should include next build.
我还尝试使用此配置在我的项目的根目录中添加netlify.toml
:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
[[plugins]]
package = "@netlify/plugin-nextjs"
并添加了 @netlify/plugin-nextjs
as dev 依赖 package.json 但我得到了同样的错误......
有人可以帮我解决这个问题吗?
【问题讨论】:
我认为使用的插件旨在加载 nextjs 项目,并且由于故事书不是 nextjs 应用程序,因此该插件会寻找 /.next/static 文件夹进行部署。我认为应该改变插件 你有没有解决这个问题? 我无法修复它。作为替代解决方案,我使用了 Chromatic 并在其上部署了我的 Storybook chromatic.com 【参考方案1】:我遇到了类似的问题,但不是故事书,而是 nx + nextjs。
如果我尝试将应用部署到 netlify,我会遇到同样的错误。
所以我更改了根目录中的 next.config.js 并添加到生成的 .static 文件夹的distDir 路径,它现在可以工作了。
这是我的 netlify.toml ss
【讨论】:
【参考方案2】:Storybook 构建不需要 Netlify Next.js 插件。事实上,不需要插件;正如OP所说,唯一需要的配置是:
构建命令:npm run build-storybook
发布目录:storybook-static
或者,在netlify.toml
:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
不需要[[plugins]]
字段。
如果通过 UI 配置 Netlify,请转到 https://app.netlify.com/sites/my-awesome-site/plugins 并删除 Next.JS 插件。
【讨论】:
以上是关于使用 Nextjs 在 Netlify 上部署 Storybook的主要内容,如果未能解决你的问题,请参考以下文章
在 Netlify 上部署时使用 Express 公开 API 路由
在 Netlify 上部署 gatsby 站点时响应错误的大小图像
尝试访问部署在 Netlify 上的站点时出现“找不到页面”