NextJS routing doesn't work when I manually put the URL after build/export

Question

When I'm testing my application on localhost normally on npm run dev, the application and routes work normally, I can type localhost:3000/settings/account, which it renders normally, now when I run npm run build and npm run export, and test after build with serve -s out, every time i try to enter any Url directly as localhost:3000/settings/account, it always redirects me to /home, even if i type /sajdklsa, instead of it going to page 404, it simply redirects to /home, what could be happening after the build? would be some configuration in my next.config.js? I'm using React 18, TypeScript and NextJs

My next.config.js file:

const path = require('path')

/** @type {import('next').NextConfig} */

// Remove this if you're not using Fullcalendar features
const withTM = require('next-transpile-modules')([
  '@fullcalendar/common',
  '@fullcalendar/react',
  '@fullcalendar/daygrid',
  '@fullcalendar/list',
  '@fullcalendar/timegrid'
])

module.exports = withTM({
  trailingSlash: true,
  reactStrictMode: false,
  experimental: {
    esmExternals: false,
    jsconfigPaths: true // enables it for both jsconfig.json and tsconfig.json
  },
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      apexcharts: path.resolve(__dirname, './node_modules/apexcharts-clevision')
    }

    return config
  },
  images: {
    domains: ['example.com.br'],
    loader: 'custom',
    loaderFile: './src/components/utils/customLoader.tsx',
  },
})

My package.json

{
  "name": "materialize-mui-react-nextjs-admin-template",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
  },
  "dependencies": {
    "@auth0/auth0-react": "1.10.1",
    "@aws-amplify/auth": "4.5.3",
    "@aws-amplify/ui-react": "2.16.1",
    "@casl/ability": "5.4.3",
    "@casl/react": "2.3.0",
    "@emotion/cache": "11.6.0",
    "@emotion/react": "11.7.0",
    "@emotion/server": "11.4.0",
    "@emotion/styled": "11.6.0",
    "@fullcalendar/common": "5.10.1",
    "@fullcalendar/core": "5.10.1",
    "@fullcalendar/daygrid": "5.10.1",
    "@fullcalendar/interaction": "5.10.1",
    "@fullcalendar/list": "5.10.1",
    "@fullcalendar/react": "5.10.1",
    "@fullcalendar/timegrid": "5.10.1",
    "@hookform/resolvers": "^3.0.0",
    "@mui/lab": "5.0.0-alpha.80",
    "@mui/material": "5.6.4",
    "@mui/x-data-grid": "5.10.0",
    "@popperjs/core": "2.11.2",
    "@reduxjs/toolkit": "1.8.1",
    "apexcharts-clevision": "3.28.5",
    "aws-amplify": "4.3.22",
    "axios": "0.27.2",
    "axios-mock-adapter": "1.20.0",
    "chart.js": "3.7.1",
    "cleave.js": "1.6.0",
    "clipboard-copy": "4.0.1",
    "clsx": "1.1.1",
    "date-fns": "2.27.0",
    "draft-js": "0.11.7",
    "firebase": "^9.18.0",
    "i18next": "21.7.1",
    "i18next-browser-languagedetector": "6.1.2",
    "i18next-http-backend": "^1.4.1",
    "jsonwebtoken": "^9.0.0",
    "keen-slider": "6.6.5",
    "mdi-material-ui": "7.1.0",
    "next": "12.1.6",
    "nprogress": "0.2.0",
    "payment": "2.4.6",
    "prismjs": "^1.28.0",
    "react": "18.1.0",
    "react-apexcharts": "1.3.9",
    "react-beautiful-dnd": "13.1.0",
    "react-chartjs-2": "4.1.0",
    "react-credit-cards": "0.8.3",
    "react-datepicker": "4.5.0",
    "react-dom": "18.1.0",
    "react-draft-wysiwyg": "1.14.7",
    "react-dropzone": "14.2.0",
    "react-hook-form": "^7.43.7",
    "react-hot-toast": "2.1.1",
    "react-i18next": "11.14.3",
    "react-perfect-scrollbar": "1.5.8",
    "react-popper": "2.2.5",
    "react-redux": "8.0.1",
    "react-router-dom": "^6.10.0",
    "react-to-pdf": "0.0.14",
    "recharts": "^2.5.0",
    "stylis": "4.0.10",
    "stylis-plugin-rtl": "2.1.1",
    "uuid": "^9.0.0",
    "yup": "^1.0.2"
  },
  "devDependencies": {
    "@types/cleave.js": "1.4.6",
    "@types/draft-js": "0.11.8",
    "@types/jsonwebtoken": "8.5.8",
    "@types/node": "17.0.31",
    "@types/nprogress": "0.2.0",
    "@types/payment": "2.1.3",
    "@types/prismjs": "1.16.6",
    "@types/react": "18.0.8",
    "@types/react-beautiful-dnd": "13.1.2",
    "@types/react-credit-cards": "0.8.1",
    "@types/react-datepicker": "4.3.2",
    "@types/react-draft-wysiwyg": "1.13.3",
    "@types/react-redux": "7.1.24",
    "@typescript-eslint/eslint-plugin": "5.6.0",
    "@typescript-eslint/parser": "5.11.0",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.6",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-import-resolver-typescript": "2.5.0",
    "eslint-plugin-import": "2.25.4",
    "next-transpile-modules": "9.0.0",
    "prettier": "2.6.2",
    "serve": "^14.2.0",
    "typescript": "4.6.4"
  }
}

Oldwife

Can you post your next.config.js file :) – Aristides

Thank you for the answer, I edited my post, there is the next.config.js :) – Oldwife

Answer 1

This below changes in the next.config.js will solve the issue. However the problem is caused due the new NextJs 13 folder structure.

const nextConfig = {
trailingSlash: true,
output: 'export',
}
module.exports = nextConfig

Sod

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Edytheee

Answer 2

try this that work for me

const nextConfig = {
trailingSlash: true,
output: 'export',
}
module.exports = nextConfig

and package.json

scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}

and npm run build

and finally publish folder 'out' on your host

This is the site I used:

https://anjanesh.dev/exporting-a-nextjs-app-with-correct-static-page-routes-on-the-server

Distill

Answer 3

docs : next13 static export

if you are trying to export please make sure add this in next.config.js

const nextConfig = {
output: 'export',
}
module.exports = nextConfig

And Please check your package.json . If you build with next build you no longer need to export . After next build , make sure to run next start .

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},

Arian

Yes, i'm trying to export and deploy at aws, but this redirect is not correct, I edited my post, check my packge.json, Thank you for helping I already put on my module.exports the output: 'export' and didn't work, still when try to acess manually some other route, it redirects me to /home – Oldwife

Please check there is any error or warning when exported . I have been tested in my own project. And It works. There is some limitation in export . Check your pages are used that limitation . Simple route should be work . and run these . next build then next export then next start . And I am using next 12.2.5 with react 18.2.0 . nextjs.org/docs/advanced-features/… – Arian

I created a simply app using next too, only with next and 2 pages, 2 Links, when I build and export, and open with serve -s out, that i'm simulating a server as if it were a vercel, netilfly or aws... It just came the same error, when I refresh the page, in example /account, the URL remains /account, but the content that is show is the content of path / , i don't understand, i think the next server just build 1 file index, and always goes there and dont have routing – Oldwife

I think you need to try to add 'trailing slash in next.config module.exports = { trailingSlash: true, } nextjs.org/docs/api-reference/next.config.js/trailing-slash also make sure to have account folder in pages folder . example pages -> account -> index.js – Arian