Next.js pages end in 404 on production build

Question

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.

Aerometry

you should create custom server for your dynamic routing for server-side. this doc might help you. nextjs.org/docs#custom-server-and-routing – Exhalant

I tested it with the customer server. Did not change anything, but found the error. The problem was that /Product/Overview for example is capitalized which was no problem in test as next directly routed and case was no issue. But in production links became case sensitive as case did matter then. – Aerometry

Can you please update you question with this fix. :) – Exhalant

Answer 1

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.

Aerometry

FYI this is also submitted to the next team as a feature request (to show a warning when building). – Aerometry

In my case everything is lower case, but still i m facing issue. – Gabriellagabrielle

can we have - sepearted routes like profile-render etc. @StefanJanuschke – Mayhap

Solved my issue, but in my opinion the Vercel team need to solve this one. – Puttyroot

Answer 2

In my case it was because the index page and the second had different file names but the name of the export const was the same by mistake (due to copy paste)

i.e. both files had: const Home: NextPage = () => {

The fix was to change the name of one of them

Tallbott

Answer 3

Make sure you don't have any sub folder inside the pages folder. And also, all folders and files must be lower case.

Before (Not working):

After (Working):

Puttyroot