不能将 NextJS 与 Firebase 一起使用

Question

我正在尝试使用 Firebase 和 NextJS 构建应用程序。我已经做了几次测试，目前都没有成功。

下面是我上次试用的详细描述。我希望有人能够指出我在路上犯的一些错误。

这是我在终端中所做的顺序以及结果：

me@MyMac % npx create-next-app@latest
✔ What is your project named? … njsapp
✔ 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
✔ Would you like to use experimental `app/` directory with this project? … Yes
✔ What import alias would you like configured? … @/* (Enter)
Creating a new Next.js app in /Users/me/Documents/FireBase/njsapp.

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 326 packages, and audited 327 packages in 14s

116 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created njsapp at /Users/me/Documents/FireBase/njsapp

me@MyMac % 
me@MyMac % cd njsapp

me@MyMac % firebase init hosting
    - Use an existing project
    - What do you want to use as your public directory? (Default)
    - Configure as a single-page app (rewrite all urls to /index.html)? No
    - Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
me@MyMac % 

me@MyMac % firebase deploy --only hosting

=== Deploying to 'fbapp'...

i  deploying hosting
i  hosting[fbapp]: beginning deploy...
i  hosting[fbapp]: found 4 files in public
✔  hosting[fbapp]: file upload complete
i  hosting[fbapp]: finalizing version...
✔  hosting[fbapp]: version finalized
i  hosting[fbapp]: releasing new version...
✔  hosting[fbapp]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/fbapp/overview
Hosting URL: https://fbapp.web.app
me@MyMac % 


me@MyMac % npm run dev

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
info  - VS Code settings.json has been created for Next.js' automatic app types, this file can be added to .gitignore if desired
event - compiled client and server successfully in 1058 ms (265 modules)
wait  - compiling...
event - compiled client and server successfully in 171 ms (265 modules)

完成后；我将我的网络浏览器指向：https://fbapp.web.app。这是我看到的：

然后将网络浏览器指向：http://localhost:3000/。这是我看到的：

我希望在这两种情况下看到同样的事情。我做错了什么或者我应该做什么我没有做？

Answer 1

在您的步骤中，如果您仔细查看消息，您可以看到 firebase 已创建 public/index.html。在这种情况下，公共目录被用作构建输出目录。通过修改

next.config.js

:

将 njsappapp/public 配置为构建输出文件

module.exports = {
  distDir: 'public',
}

你需要运行

npm run build 

。然后将所有构建文件添加到

public

目录中。

完成这些步骤后，运行

firebase init

和

firebase deploy

，就像您在上面的快照中所做的那样。然后只有您会在您的网站上看到实际文件。干杯！