我在Firebase上有一个路由问题的NextJS应用程序。我已经在这里写了一篇文章来解释这个问题:Extra NextJS routes, not working on the server side
在这篇文章中,我给予了一个示例应用程序构建过程来重现这个问题;这样一些NextJSMaven就可以让我知道我哪里做错了或者遗漏了一些重要的细节。
下面是我如何构建一个示例应用程序来重现我的问题的详细描述。任何人都应该能够遵循相同的步骤。
这就是我在终端中所做的:
me@MyMac % npm --version
8.15.0
me@MyMac % firebase --version
12.0.0
me@MyMac % npx create-next-app@latest
✔ What is your project named? … sampleapp
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No
Creating a new Next.js app in /Users/me/sampleapp.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
added 352 packages, and audited 353 packages in 21s
136 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created sampleapp at /Users/me/sampleapp
me@MyMac % cd sampleapp
me@MyMac sampleapp %
现在我编辑文件 next.config.js,使其看起来如下所示:
me@MyMac sampleapp % cat next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
experimental: {
appDir: true,
},
}
module.exports = nextConfig
me@MyMac sampleapp %
接下来我运行命令:
me@MyMac sampleapp % firebase init hosting
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/me/sampleapp
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: sampleproj-n2m3p4 (VicHugo)
i Using project sampleproj-n2m3p4 (VicHugo)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote out/404.html
✔ Wrote out/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
me@MyMac sampleapp %
此时,我编辑 firebase.json 文件,使其看起来如下所示:
me@MyMac sampleapp % cat firebase.json
{
"hosting": {
"public": "out",
"site": "sampleapp",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
me@MyMac sampleapp %
这里我在 app 目录中插入一个名为 Special 的目录;我在里面放了一个文件,名为 page.tsx。
它看起来是这样的:
me@MyMac sampleapp % cat app/Special/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
me@MyMac sampleapp %
接下来我运行命令:
me@MyMac sampleapp % npm run dev
At this point using the browser I can see:
http://localhost:3000/
displaying the Next.JS default sample page, as expected.
http://localhost:3000/Special
Hello, Next.js!
shows up in the browser also as expected.
然后我在终端中停止本地服务器并运行命令:
me@MyMac sampleapp % npm run build
me@MyMac sampleapp % firebase deploy --only hosting
Again using the browser I can see:
https://sampleapp.web.app
Next.JS default sample page. (as expected)
https://sampleapp.web.app/Special
404 | This page could not be found. (not as I expected)
我期待着同样的结果:http://localhost:3000/Special
发生了什么事?
1条答案
按热度按时间r1zhe5dt1#
要删除url中的
.html
扩展名,请在firebase.json
文件中添加cleanUrls
属性。验证码: