Build and deployment of Next.js project with Netlify CLI

Support
, ,
1

Hi

I try to configure Netlify builds and deployments with the Netlify CLI for a sample Next.js project. Running a build on Netlify via GitHub works as expected, but with the Netlify CLI, I have a few questions.

My netlify.toml looks like this:

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

I get this error when running netlify build:

> netlify build

Netlify Build
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 29.39.1

❯ Flags
  dry: false
  offline: false

❯ Current directory
  C:\Users\paula\git\next-app-test-2

❯ Config file
  C:\Users\paula\git\next-app-test-2\netlify.toml

❯ Context
  production

❯ Using Next.js Runtime - v5.2.1

@netlify/plugin-nextjs (onPreBuild event)
────────────────────────────────────────────────────────────────


(@netlify/plugin-nextjs onPreBuild completed in 14ms)

build.command automatically detected
────────────────────────────────────────────────────────────────

$ npm run build

> next-app-test@0.1.0 build
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.29 kB        92.2 kB
└ ○ /_not-found                          871 B          87.8 kB
+ First Load JS shared by all            87 kB
  ├ chunks/23-0627c91053ca9399.js        31.5 kB
  ├ chunks/fd9d1056-2821b0f0cabcd8bd.js  53.6 kB
  └ other shared chunks (total)          1.86 kB


○  (Static)  prerendered as static content


(build.command completed in 38.9s)

@netlify/plugin-nextjs (onBuild event)
────────────────────────────────────────────────────────────────


@netlify/plugin-nextjs (onEnd event)
────────────────────────────────────────────────────────────────


(@netlify/plugin-nextjs onEnd completed in 24ms)

Save updated config
────────────────────────────────────────────────────────────────


(options.onEnd completed in 5ms)

Plugin "@netlify/plugin-nextjs" failed
────────────────────────────────────────────────────────────────

  Error message
  Error: Your publish directory cannot be the same as the base directory of your site. Please check your build settings

  Plugin details
  Package:        @netlify/plugin-nextjs
  Version:        5.2.1
  Repository:     git+https://github.com/netlify/next-runtime-minimal.git
  npm link:       https://www.npmjs.com/package/@netlify/plugin-nextjs
  Report issues:  https://github.com/netlify/next-runtime-minimal/issues

  Error location
  In "onBuild" event in "@netlify/plugin-nextjs" from netlify.toml

  Resolved config
  build:
    command: npm run build
    commandOrigin: heuristics
    publish: C:\Users\paula\git\next-app-test-2
    publishOrigin: default
  plugins:
    - inputs: {}
      origin: config
      package: '@netlify/plugin-nextjs'

Thus, I set the publish directory as follows (as the npm build command):

[build]
  command = "npm run build"
  publish = ".next"

The netlify build command then runs fine. If I then deploy with netlify build, the site misses assets like the icons. This can be seen here:

Instead, the content to be deployed lives in the directory .netlify/static. In order this content gets deployed when running netlify deploy, I have to set this in netlify.toml:

[build]
  command = "npm run build"
  publish = ".netlify/static"

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

Now, all assets are available as expected:

But I doubt it is in the creator’s sense to change the publish directory configuration in netlify.toml between building the application and deploying it. What configurations must be set in netlify.toml in order I can build and deploy the site with Netlify CLI?

The code of the Next.js project lives in this repo here:

2

This line indicates that for whatever reason the publish directory was not set to .next. Your original configuration was correct and it should typically work.

3

When I first built the project, I didn’t set the publish directory in netlify.toml. My uncertainty goes a bit further.

In my netlify.toml, I have now:

[build]
  command = "npm run build"
  publish = ".next"

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

netlify build works now. But when I deploy to Netlify, all assets as icons (SVG files) and chunk files (JavaScript files) are not where they are expected to be.

2024-05-07 10_15_40-Create Next App
2024-05-07 10_15_40-Create Next App1331×358 30.2 KB

In VS Code, I see that the required files live in .netlify/static.

But since I set .next as the publish directory in netlify.toml, this directory’s content gets published to Netlify. However, I need to have the assets living in .netlify/static being published to Netlify.
How can I have Netlify CLI publish the contents of .netlify/static when deploying?

4

I am also facing the same issue: my netlify.toml file:

[dev]
    command = "npm run dev"
    port = 8888
    targetPort = 18000
    publish = ".next"

[build]
    publish = ".next"

[functions]
    directory = "api"
    external_node_modules = ["sequelize"]

Assets are missing

5

Hi, what site on your account is this about?

6

I read here that the deployment including building upfront, can be done with this command:
netlify deploy --build

Thank you for that @hrishikesh.

This command worked a few times on my Windows machine. When it suddenly stopped working and failed with the error Error: Failed publishing static content, I tried it on Linux, where the deployment through the Netlify CLI runs successfully every time.

Closing and opening all VS Code editor windows again can sometimes help the deployment work again on Windows.

Hopefully this may be of help for someone.