Next js 14 public folder deploy issue

Support
, ,
1

Hi

I’m working on building my Next.js 14 app, but I’m having trouble with the public folder, which contains images. After building the app, I can’t find the public folder in the .next build directory. As a result, the images are not being found, and I’m getting 404 errors.

I’ve been trying to resolve this issue for a couple of days but haven’t found a solution yet. Can someone help me understand how to properly include and deploy the public folder so that the images are available on the server?

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'hi'],
  },
  // images: {
  //   domains: ['co-buy.uk'],
  // },
  assetPrefix: 'https://co-buy.uk',
};

export default nextConfig;

//netlify.toml
[[plugins]]
  package = "@netlify/plugin-nextjs"
  
[build]
  command = "npm run build"
  publish = "out"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[functions]
  [functions.___netlify-server-handler]
    included_files = ["./public/**"]
2

This is the expected behavior.

You already are and the files already are.

Read the appropriate Next.js documentation:
https://nextjs.org/docs/pages/building-your-application/optimizing/static-assets

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, the file public/avatars/me.png can be viewed by visiting the /avatars/me.png path. The code to display that image might look like:

You do not reference the files in the resulting build with /public/ because they are moved to /

1 Like