CODEWITHSUNDEEP
next.jsnetlifystorybook
alex_coding
alex_coding

Reputation: 43

Deploy Storybook on Netlify with Nextjs

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 ?

Upvotes: 2

Views: 1388

Answers (2)

ajrussellaudio
ajrussellaudio

Reputation: 401

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.

Upvotes: 0

Piotr Glejzer
Piotr Glejzer

Reputation: 278

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.

enter image description here

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

enter image description here

enter image description here

and this is my netlify.toml ss

enter image description here

Upvotes: 1

Related Questions