How Do I Serve My Site With Nginx? | Next.js | Page 1

narrow pine Aug 13, 2024, 10:16 PM

#

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?

ivory sentinelBOT Aug 13, 2024, 10:17 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

narrow pine Aug 13, 2024, 10:17 PM

#

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.

supple crow Aug 14, 2024, 12:48 AM

#

Are you hosting a static site? You would serve your site using nginx typically by running

npm run build
then
npm run start

narrow pine Aug 14, 2024, 2:59 PM

#

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.

supple crow Aug 14, 2024, 3:05 PM

#

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

narrow pine Aug 14, 2024, 3:06 PM

#

I see what you're saying. I would like to serve a static site without using a reverse proxy to a Next.js server.

supple crow Aug 14, 2024, 3:06 PM

#

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

#

Then you want to follow this

narrow pine Aug 14, 2024, 3:06 PM

#

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.

supple crow Aug 14, 2024, 3:10 PM

#

did you follow this part in your next.config.js?

  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',
}

narrow pine Aug 14, 2024, 3:11 PM

#

Yes. As mentioned above, my config looks like this: output: 'export', distDir: 'build', trailingSlash: true.

supple crow Aug 14, 2024, 3:11 PM

#

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?

#

😦

narrow pine Aug 14, 2024, 3:14 PM

#

No sweat, I'm not in a hurry.

#

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.

narrow pine Aug 14, 2024, 3:44 PM

#

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.

supple crow Aug 14, 2024, 4:33 PM

#

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.

#

@narrow pine

narrow pine Aug 14, 2024, 4:34 PM

#

good question!

supple crow Aug 14, 2024, 4:36 PM

#

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.

narrow pine Aug 14, 2024, 4:36 PM

#

No sweat

supple crow Aug 14, 2024, 4:38 PM

#

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.

narrow pine Aug 14, 2024, 4:38 PM

#

I have a lot of import { useRouter } from "next/router"; does that answer the question?

supple crow Aug 14, 2024, 4:38 PM

#

Negative. What does this look like on your side

#

mine says app, does yours say pages?

#

narrow pine Aug 14, 2024, 4:39 PM

#

Yes, I have pages.

#

I don't have src.

supple crow Aug 14, 2024, 4:40 PM

#

Yeah thats fine, thats optional for organization

supple crow Aug 14, 2024, 4:40 PM

#

supple crow With all that being said, your static files are just ``` │ ├── pages │ │ ...

Based on what I seee your entry point is index.html here.

#

You can disregard all the other stuff I think

narrow pine Aug 14, 2024, 4:41 PM

#

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.

supple crow Aug 14, 2024, 4:42 PM

#

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

narrow pine Aug 14, 2024, 5:12 PM

#

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.

supple crow Aug 14, 2024, 5:19 PM

#

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?

const nextConfig = {
    output: 'export',
    trailingSlash: true,
    distDir: 'build',
  };

export default nextConfig;

narrow pine Aug 14, 2024, 7:36 PM

#

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?

narrow pine Aug 14, 2024, 8:45 PM

#

Okay, we'll update this and see where it lands. I assume that will fix everything. @supple crow u da man.

odd pier Aug 14, 2024, 8:59 PM

#

narrow pine Okay, we'll update this and see where it lands. I assume that will fix everythin...

Someone messed up! haha

narrow pine Aug 14, 2024, 8:59 PM

#

Yeah, I didn't set this one up... 🤷🏻‍♂️

supple crow Aug 14, 2024, 10:08 PM

#

😂 I guess that should have been my question really early on is what version of nextjs you running xD

#

rip

#How Do I Serve My Site With Nginx?