Next.js application is looking for wrong "_next" directory after build & start

[alexandrepaiva-dev]

I'm running build & start with my Next.js application on my own server. The page content (HTML tags and text) is loading fine but nothing else loads (css, js etc). When I go to the console all the assets are returning 404 error because it's trying to search for a directory which doesn't exist, for example:

https://mywebsite.com/_next/static/css/styles.a95cabed.chunk.css

But the problem is that _next doesn't exist on my server, I can see only .next directory. Why the build is generating different directories? Sorry if it's a newbie issue, I'm still learning React & Next.js. Locally everything works fine.

Thank you!

System information

Both my laptop and server are Ubuntu 18.04

"dependencies": {
"@tanem/react-nprogress": "^3.0.19",
"@zeit/next-sass": "^1.0.1",
"leaflet": "^1.6.0",
"next": "9.2.2",
"next-i18next": "^4.2.0",
"node-sass": "^4.13.1",
"react": "16.12.0",
"react-dom": "16.12.0",
"react-icons": "^3.9.0",
"react-leaflet": "^2.6.3",
"react-reveal": "^1.2.2"
}

UPDATE:

I will try to describe the steps I'm taking:

1 - The directory on my server is empty
2 - I upload the following files/directories from my PC:
package.json
i18n.js
yarn.lock
next.config.js
server.js
/pages
/styles
/components
/lib
/contexts
/public
3 - On my server I run the command "yarn" to download the packages
4 - I run "yarn build" (next build)
5 - Then "yarn start" (NODE_ENV=production node server.js)
6 - "Ready on http://localhost:3000" is displayed on the console, in my server the port 3000 is used proxy (Nginx) pointing to the test domain I'm using: https://node.alexandrepaiva.dev
7 - No asset is loaded (You can see the browser console error) - Because it's trying to load from the directory that doesn't exist (that I explained originally on the post)

Note: locally everything works fine

I'd like to know what I'm doing wrong and what to do to fix it?

Thank you!

[timneutkens]

next start serves .next/static under the /_next namespace. It's not a one to one mapping.

[alexandrepaiva-dev]

Thanks! But what I should do to fix that? I can't see what I'm doing wrong.

[Timer]

@alexandrepaivaa not sure I understand. Are you running next start and accessing the port it listens to?

You cannot serve .next yourself—you need to boot the next start server.

[alexandrepaiva-dev]

@Timer I've just updated my post describing all the steps I'm taking. I hope it's clear now what's happening, thank you so much for any help.

[timneutkens]

Looks like you're using a custom server, could you post the code for server.js?

[alexandrepaiva-dev]

Sure, this is my server.js:

const express = require('express')
const next = require('next')
const nextI18NextMiddleware = require('next-i18next/middleware').default

const nextI18next = require('./i18n')

const port = process.env.PORT || 3000
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler();

(async () => {

	await app.prepare()
	const server = express()

	await nextI18next.initPromise
	server.use(nextI18NextMiddleware(nextI18next))

	server.get('*', (req, res) => handle(req, res))

	await server.listen(port)
	console.log(`> Ready on http://localhost:${port}`) // eslint-disable-line no-console

})()

[alexandrepaiva-dev]

Guys, I've fixed the error.

My server is running with Nginx, so I change the Nginx conf file of the domain. If anyone else has this problem I fixed adding this code:

location /_next/ {
    alias /absolute_path_here/public_html/.next/;
    expires 30d;
    access_log on;
}

Now the system is loading the correct path when accessing the page. Thanks.

[timneutkens]

The configuration that you've shared will expose all of .next to the world, which is a potential security issue as someone will be able to receive server-side only code.

[alexandrepaiva-dev]

Is this better?

location /_next/static/

[Luxiris]

I had the exact same issue ! I tried everything nothing worked but in the nginx config file i removed the line " try_files $uri $uri/ =404 " inside location / { } and the problem was fixed.

[FrankDaze]

I still have the same problem and can't find a way to fix it. Could you show your full nginx config?

[mytchallb]

This is the nginx config that fixed it for me:
rewrite ^/_next/(.*\.(css|js))$ /$1 break;

Also wrote a blog post featuring the topic:
https://mytchall.dev/removing-the-build-folders-when-deploying-next-js-on-plesk/

[joelmart14]

Mytchallb, your blog is really useful, but I can not fix that issue.
In my case I cloned the repo in different path and after apply the steps in your blog, I copied .next folder into the domain (httpsdocs/.next) but I am not able to see the resources of the page.
I also apply the rewrite nginx command.

[mytchallb]

Mytchallb, your blog is really useful, but I can not fix that issue. In my case I cloned the repo in different path and after apply the steps in your blog, I copied .next folder into the domain (httpsdocs/.next) but I am not able to see the resources of the page. I also apply the rewrite nginx command.

Thanks, have you updated the path in Plesks node settings? If you want to send me details of your setup I can help take a look

[joelmart14]

Yes, I did it. Same has you mention in the blog. I also review the nginx.conf file, and it was updated properly.
this is the temp domain that I am using for test: https://example.74-208-117-143.plesk.page/
I really appreciate your help

[mytchallb]

Yes, I did it. Same has you mention in the blog. I also review the nginx.conf file, and it was updated properly. this is the temp domain that I am using for test: https://example.74-208-117-143.plesk.page/ I really appreciate your help

I think it could be an issue with how you're linking the images in Next.js using a relative path, or if you're not using the steps I mentioned in my blog about copying the static+public folder into the standalone one. If you comment on my blog it will send me your email and I can email directly for further help.