Дополнительные маршруты NextJS, не работающие, с предоставленным образцом

У меня есть приложение 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?

Mark Munene 15.05.2023 10:09

Я только что попробовал, и да. Появляется при переходе на sampleapp.web.app/Special.html. Есть ли что-то, что мне нужно сделать, чтобы он отображался без «.html»?

Michel 15.05.2023 10:27
Интеграция Angular - Firebase Analytics
Интеграция Angular - Firebase Analytics
Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.
0
2
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы удалить расширение .html в URL-адресах, добавьте атрибут cleanUrls в свой файл firebase.json. Проверьте код ниже.

"hosting": {
  // ...

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

Да, в самом деле; оно работает.

Michel 15.05.2023 16:26

Другие вопросы по теме