404 page not found nextJS

Support
, , ,
#1

My site: https://joyful-froyo-cb853f.netlify.app/

  • I have deployed this site but when I try to access it it gives following error
    Build succeeds but on visit it gives following error:
    image
    image680×533 22.5 KB
#2

Hello @detosk, kindly note the build settings for Next.js below

The typical build settings are as follows. They differ depending on how your site is generated.

  • For apps that use server-side rendering and Next.js Runtime:
    • Build command: next build
    • Publish directory: .next
  • For apps that use static HTML export:
    • Build command: next build && next export
    • Publish directory: out

Note that If you are deploying from a Monorepo or a sub-directory, kindly make sure you set the base directory when you are deploying the Next.js site.

Base directory

The base directory setting prompts our buildbots to change to the specified directory to detect dependencies and perform caching during the build process. It’s useful for building from a monorepo or subdirectory.

For more information about deploying sites from monorepos or sub-directories, kindly visit the link below

Hope this helps. Thanks.

404 on nextjs deployment
#3

Hi @clarnx thank you for responding but I’ve tried both ways.
Initially some of the pages were serversiderendered so I used the first option from the build settings you mentioned. I received same 404 page not found.
Then I moved data fetching logic to client side and still deployment succeeds but URL gives page not found error.
Don’t know where I’m wrong here because deployment is succeeded in both cases.

#4

Hi @detosk, thanks for the extra feedback.
If possible can you share a repository of your site in order for me to help with the debugging?

#5

Hi @clarnx i have shared the details with you by inbox.

1 Like
#6

Hi everyone.

I am also getting the same errors like this, though I have multiple pages on my site, but only the landing page is okay, other pages show the same error as above.

Site link: https://elaborate-kataifi-27ba94.netlify.app/
Repository link:GitHub - Ahtsham110/Bluedesh

Please help me fix my issue.

Thanks

#7

Hello @Ahtsham110 , In your case since you are using vite to deploy your site, you need to register all the pages for production by creating a vite.config.js file in your project root with the content below.

// vite.config.js
import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        services: resolve(__dirname, "services.html"),
        portfolio: resolve(__dirname, "portfolio.html"),
        about: resolve(__dirname, "about.html"),
        contact: resolve(__dirname, "contact.html"),
      },
    },
  },
});

For more information about deploying multi-pages with vite kindly visit the official documentation below.

Note that anytime you add a page you need to register it in the vite.config.js file.
Kindly redeploy and let me know if it works. Thanks.