Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Next.js pages end in 404 on production build

I have built a next.js app. The pages works fine in development env, but if I try to run the production build only the index.js page is loaded properly, all other pages end in a 404.

The npm run build outputs the following:

reating an optimized production build ...

Compiled successfully.

Warning: You have opted-out of Automatic Prerendering due to `getInitialProps` in `pages/_app`.
Read more: https://err.sh/next.js/opt-out-automatic-prerendering

Page                                    Size     Files  Packages
┌ σ /                                   66.8 kB      4        27
├   /_app                               17.9 kB      0        31
├   /_document
├   /_error                             397 B        0        27
├ σ /Products/[specificPage]/Dashboard  404 B        4        27
├ σ /Products/Overview                  95.1 kB      9        30
├ σ /Products/Roadmap                   475 B        4        27
├ σ /Strategy/Goals                     451 B        4        27
└ σ /Strategy/Metrics                   459 B        4        27

Therefore I assume that the pages get properly built. This now gets me fairly confused.

From my index.js Page I have a next/link to /strategy/goals which loads for ever if clicked. As said if accessed directly the page is displaying a 404.

EDIT: Also the console only displays Ready on http://localhost:3000 --> not showing any logs regarding building pages, not sure if this should happen in production or only in development.

like image 616
Stefan Januschke Avatar asked Sep 21 '19 10:09

Stefan Januschke


People also ask

How do I redirect a 404 page in next JS?

To create a custom 404 page you can create a pages/404. js file. This file is statically generated at build time. Note: You can use getStaticProps inside this page if you need to fetch data at build time.

Is next JS ready for production?

Next. js offers a production-ready solution to routing and several other optimizations that will allow you to build an app with little to no configuration and you are left to focus on building a product in a pre-configured development environment.

Who uses next JS in production?

Next. js is widely used by the biggest and most popular companies all over the world like Netflix, Uber, Starbucks, or Twitch. It's also considered as one of the fastest-growing React frameworks, perfect to work with static sites – which was the hottest topic in the web development world lately.


1 Answers

TLDR: /pages should only contain lower case letters.

(Answered by myself)

The problem was that the folder name and files (/Product/Overview for example) where capitalised which was no problem in test as next directly routed and case was no issue.

Executing the built version, the filesystem of the production environment takes over for routing. Some operating systems (macOS for me)are case sensitive and wont route correctly as the pages are not found.

Fixed by lowercasing everything within the /pages directory.

like image 170
Stefan Januschke Avatar answered Sep 23 '22 12:09

Stefan Januschke