У меня есть приложение NextJS на Firebase с проблемами маршрутизации. Я уже написал пост, чтобы объяснить проблему здесь: Дополнительные маршруты NextJS, не работающие на стороне сервера
В этом я даю пример процедуры сборки приложения, чтобы воспроизвести проблему; так что некоторые эксперты NextJS могут сообщить мне, где я делаю что-то неправильно или упускаю какую-то важную деталь.
Ниже приведено подробное описание того, как я создаю пример приложения для воспроизведения своей проблемы. Любой должен быть в состоянии выполнить те же шаги.
Вот что я делаю в терминале:
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 %
Здесь я вставляю каталог с именем 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
Что случилось ?
Я только что попробовал, и да. Появляется при переходе на sampleapp.web.app/Special.html. Есть ли что-то, что мне нужно сделать, чтобы он отображался без «.html»?

Чтобы удалить расширение .html в URL-адресах, добавьте атрибут cleanUrls в свой файл firebase.json. Проверьте код ниже.
"hosting": {
// ...
// Drops `.html` from the URLs
"cleanUrls": true
}
Да, в самом деле; оно работает.
Появляется ли страница, когда вы переходите на sampleapp.web.app/Special.html?