额外的NextJS路由,不工作,提供了示例

xxe27gdn  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(93)

我在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
发生了什么事?

r1zhe5dt

r1zhe5dt1#

要删除url中的.html扩展名,请在firebase.json文件中添加cleanUrls属性。验证码:

"hosting": {
  // ...

  // Drops `.html` from the URLs
  "cleanUrls": true
}

相关问题