当我在npm run dev上的localhost上正常测试我的应用程序时，应用程序和路由正常工作，我可以键入localhost:3000/settings/account，它正常呈现，现在当我运行npm run build和npm run export，并在使用serve-s out进行构建后测试时，每次我试图直接输入任何Url作为localhost:3000/sittings/account，它总是将我重定向到/home，即使我键入/sajdklsa，它也不会转到404页，而是简单地重定向到/hom，构建后会发生什么？在我的next.config.js中会有一些配置吗？我正在使用React 18、TypeScript和NextJs
我的下一个config.js文件：
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',
},
})
我的包.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"
}
}
next.config.js中的以下更改将解决此问题。然而，问题是由于新的NextJs 13文件夹结构引起的。
const nextConfig = {
trailingSlash: true,
output: 'export',
}
module.exports = nextConfig
试试这个对我有用
const nextConfig = {
trailingSlash: true,
output: 'export',
}
module.exports = nextConfig
和软件包.json
scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
和npm运行构建
并最终在主机上发布文件夹"out">
这是我使用的网站：
https://anjanesh.dev/exporting-a-nextjs-app-with-correct-static-page-routes-on-the-server
docs:next13静态导出
如果您正在尝试导出，请确保将其添加到next.config.js 中
const nextConfig = {
output: 'export',
}
module.exports = nextConfig
请检查您的package.json。如果您使用下一个版本进行构建，则不再需要导出。在下一次生成之后，请确保运行下一次启动。
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},