Next.js Discord

Discord Forum

How Do I Serve My Site With Nginx?

Unanswered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
I ran npm run build; and the output is confusing. there is no index.html...it's in build/server/pages/index.html. How do I serve this?

58 Replies

Giant AngoraOP
in next.config.js, I have output: 'export', distDir: 'build', trailingSlash: true. There is build/{BUILD_ID,build-manifest.json,cache/,export-marker.json,images-manifest.json,server,static} and lots more JSON files.
In build/server, I see middleware-build-manifest.js, middleware*.js, middleware-manifest.json, font-manifest.json, chunks/, and some others.
Jboncz
Are you hosting a static site? You would serve your site using nginx typically by running

npm run build
then
npm run start
Giant AngoraOP
I'm not sure what a static site is. The javascript, HTML, CSS, etc. don't change, but the site fetches data from a REST server.
I don't think npm run start is the right way because it will run webpack dev server (maybe) or some other server, not nginx.
Jboncz
nginx is a service on the box that serves as your ssl reverse proxy
I use nginx in my production environment
on the box you should be able to do systemctl status nginx
Giant AngoraOP
I see what you're saying. I would like to serve a static site without using a reverse proxy to a Next.js server.
Then you want to follow this
Giant AngoraOP
Reading!
After running next build, Next.js will generate the following files
/out/index.html
...
This is not my experience. As mentioned above, I see:
build/{BUILD_ID,build-manifest.json,cache/,export-marker.json,images-manifest.json,server,static} and lots more JSON files.
(build, not out because in the configuration, I have distDir: 'build'.) No index.html.
Jboncz
did you follow this part in your next.config.js?

const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
Giant AngoraOP
Yes. As mentioned above, my config looks like this: output: 'export', distDir: 'build', trailingSlash: true.
Jboncz
Okay. one sec, let me test it locally
I set it up just like you and I have a index.html inside the build folder
I have a meeting I gotta get to, will be a min before I can respond
Oh are you using pages dir?
😦
Giant AngoraOP
No sweat, I'm not in a hurry.
Giant AngoraOP
build
├── BUILD_ID
├── build-manifest.json
├── cache
│   ├── config.json
│   ├── next-server.js.nft.json
│   ├── swc
│   │   └── plugins
│   │       └── v3
│   └── webpack
│       ├── client-production
│       │   ├── 0.pack
│       │   └── index.pack
│       └── server-production
│           ├── 0.pack
│           └── index.pack
├── export-marker.json
├── ... json files
├── server
│   ├── chunks
│   │   ├── 491.js
│   │   ├── 582.js
│   │   ├── 656.js
│   │   ├── 664.js
│   │   ├── 676.js
│   │   └── font-manifest.json
│   ├── font-manifest.json
│   ├── middleware-build-manifest.js
│   ├── ...
│   ├── pages
│   │   ├── 404.html
│   │   ├── 500.html
│   │   ├── admin
│   │   │   ├── open.html
│   │   │   └── open.js.nft.json
│   │   ├── _app.js
│   │   ├── _app.js.nft.json
│   │   ├── _document.js
│   │   ├── _document.js.nft.json
│   │   ├── _error.js
│   │   ├── _error.js.nft.json
│   │   ├── index.html
│   │   └── index.js.nft.json
│   ├── pages-manifest.json
│   └── webpack-runtime.js
├── static
│   ├── 2sku5TNySjGyDuFk2_Epn
│   │   ├── _buildManifest.js
│   │   └── _ssgManifest.js
│   ├── chunks
│   │   ...
│   │   ├── main-be43d357da86e0af.js
│   │   ├── pages
│   │   │   ├── admin
│   │   │   │   └── open-9e8231543f6df1ed.js
│   │   │   ├── _app-5fb3e62960cc86ec.js
│   │   │   ├── _error-a4ba2246ff8fb532.js
│   │   │   └── index-91ca2e3e527e8844.js
│   │   ├── polyfills-c67a75d1b6f99dc8.js
│   │   └── webpack-14a891bf35ecde1d.js
│   └── css
│       ...
│       └── f2d4fdccce5c1d99.css
└── trace
I had to trim because Discord won't let me send the whole thing.
I do have pages/ , it's just in the wrong spot.
Giant AngoraOP
Oh are you using pages dir?
I had read that as, "do you have a pages dir [in the output directory]?", and thought I answered it. In the repository is a pages/ with several tsx files: index.tsx, login.tsx, _app.tsx, etc. and some .scss files.
Jboncz
You have middleware in your project? Its unsupported.
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    trailingSlash: true,
    distDir: 'build',
  };

export default nextConfig;


This is what your next.config.mjs should look like.
In your nextjs project are you using page router or app router? I was testing using the app router.
@Giant Angora
Giant AngoraOP
good question!
Jboncz
If your using the 'page router' im going to have a little more difficulty helping lol I dont have any test projects using the pages router as its I would say obsolete, though still supported.
Giant AngoraOP
No sweat
Jboncz
With all that being said, your static files are just

│   ├── pages
│   │   ├── 404.html
│   │   ├── 500.html
│   │   ├── admin
│   │   │   ├── open.html
│   │   │   └── open.js.nft.json
│   │   ├── _app.js
│   │   ├── _app.js.nft.json
│   │   ├── _document.js
│   │   ├── _document.js.nft.json
│   │   ├── _error.js
│   │   ├── _error.js.nft.json
│   │   ├── index.html

Slap everything in the pages dir and I think you would have your static site.
Giant AngoraOP
I have a lot of import { useRouter } from "next/router"; does that answer the question?
Jboncz
Negative. What does this look like on your side
mine says app, does yours say pages?
Giant AngoraOP
Yes, I have pages.
I don't have src.
Jboncz
Yeah thats fine, thats optional for organization
You can disregard all the other stuff I think
Giant AngoraOP
I tried something like rm -r *.json ...etc...; mv server/pages/* . and serve that. I got the index.html, but no CSS, and nothing worked.
Jboncz
Gotcha.... is your project have any secrets in it? If you can share it and I can build on locally I might be able to help I just dont have any projects that use the page router.
You can sanitize your project if you want as well, and send that
Giant AngoraOP
Sorry, bank account woes distracting me! The project is sensitive...
I have another project that uses page routing and serves static assets after npm run build. I have been having difficulty finding what the difference between that project and this one is. I think I'll dig deeper in that direction.
Jboncz
It almost looks like its still trying to build the project normally like it would in the .next folder. Can you verify there is nothing else in next.config.mjs and looks exactly like this?

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    trailingSlash: true,
    distDir: 'build',
  };

export default nextConfig;
Giant AngoraOP
Thank you for checking back, and sorry for the delay! I had module.exports = {... I changed to exactly what you have, and I get, "SyntaxError: Unexpected token 'export'" when building.
If I use /** @type {import('next').NextConfig} */module.exports={output:'export',trailingSlash:true,distDir:'build'}; I get the same problematic build directory.
(that's just an adjustment of your example.)
WHOAA!! I read the output of npm run build more carefully:
warn - Invalid next.config.js options detected:
- The value at .output must be one of: "standalone".
Reading!!
package.json has "next": "^12.0.7"...this app is like three months old...why on earth?
Giant AngoraOP
Okay, we'll update this and see where it lands. I assume that will fix everything. @Jboncz u da man.
Giant AngoraOP
Yeah, I didn't set this one up... 🤷🏻‍♂️
Jboncz
😂 I guess that should have been my question really early on is what version of nextjs you running xD
rip
Giant AngoraOP
Yeah, it's the obvious question, and I hate getting it because it's so stupid and boring...would have helped this time :-P