2

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"
  }
}
Herbert Cabus Jacby
  • 21
  • 1
  • 4

3 Answers3

1

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

Mohammad
  • 21
  • 3
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
priyesh kadbe
  • 11
  • 1
  • 1
    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](/help/how-to-answer). – Community May 09 '23 at 12:26
-1

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"
},
ThanHtutZaw
  • 67
  • 1
  • 7
  • 1
    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 – Herbert Cabus Jacby Apr 02 '23 at 03:27
  • 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 . https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features – ThanHtutZaw Apr 02 '23 at 06:12
  • 1
    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 – Herbert Cabus Jacby Apr 02 '23 at 12:56
  • I think you need to try to add 'trailing slash in next.config `module.exports = { trailingSlash: true, }` https://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 – ThanHtutZaw Apr 03 '23 at 02:11