Deploy Storybook on Netlify with Nextjs

Question

I am trying to deploy my Storybook on Netlify, I'm using Next.js framework but it fails every time and I don't know what is wrong

Netlify configuration :

Build command: npm run build-storybook

Publish directory: storybook-static

My 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"
  }
}

The error I get on 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.

I have also tried to add a netlify.toml at the root of my project with this config:

[build]
  command = "npm run build-storybook"
  publish = "storybook-static"

[[plugins]]
  package = "@netlify/plugin-nextjs"

And added @netlify/plugin-nextjsas dev dependency of package.json but I get the same error...

Can someone help me on this please ?

I think the plugin used is intended to load nextjs project and since the storybook is not a nextjs app, the plugin looks for /.next/static folder to deploy. I think that the plugin should be changed — Kaushik
– Kaushik, Commented Mar 24, 2021 at 6:04
I wasn't able to fix it. As a solution alternative I used Chromatic and deploy my Storybook on it chromatic.com — alex_coding
– alex_coding, Commented May 23, 2021 at 11:30

Piotr Glejzer · Accepted Answer · 2021-05-22 11:10:37Z

1

I had a similar problem but not with the storybook but with nx + nextjs.

If I tried to deploy the app to the netlify I got the same error.

So I changed next.config.js in the root directory and add to distDir path to generated .static folder and it's working now.

and this is my netlify.toml ss

answered May 22, 2021 at 11:10

Piotr Glejzer

2783 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ajrussellaudio · Accepted Answer · 2021-07-07 13:07:25Z

The Netlify Next.js plugin isn't required for a Storybook build. In fact, no plugins are required; the only configuration needed is, as OP says:

Build command: npm run build-storybook
Publish directory: storybook-static

Or, in netlify.toml:

[build]
  command = "npm run build-storybook"
  publish = "storybook-static"

No [[plugins]] fields are needed.

If Netlify is configured through the UI, go to https://app.netlify.com/sites/my-awesome-site/plugins and remove the Next.JS plugin.

Collectives™ on Stack Overflow

Deploy Storybook on Netlify with Nextjs

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related