NextJS与Firebase集成问题：本地与部署页面不一致求助

我尝试用Firebase和Next.js构建应用，多次测试未成功。最新尝试后，本地开发页面正常，但部署到Firebase Hosting后显示默认页面，两者内容不一致，求排查操作错误。

操作流程及终端输出 #

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 % 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 % 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 % npm run dev

> njsapp@0.1.0 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)

问题现象 #

• 本地访问http://localhost:3000：显示正常的Next.js初始页面
• 访问Firebase Hosting地址https://fbapp.web.app：显示Firebase默认页面

附：next.config.js配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

问题原因及解决步骤 #

原因 #

你部署的是Firebase Hosting初始化时生成的public目录默认文件，而非Next.js项目的构建产物，导致线上页面与本地不一致。

解决步骤 #

1. 修改Next.js配置（静态导出场景可选）
   若应用不需要服务器端渲染（SSR），可在next.config.js添加静态导出配置：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     experimental: {
       appDir: true,
     },
     output: 'export' // 开启静态导出
   }
   
   module.exports = nextConfig
   

2. 构建Next.js项目
   执行命令生成部署产物：

   npm run build
   

   • 开启静态导出后，会生成out目录
   • 未开启则生成.next目录（需配合Firebase Cloud Functions，新手推荐先使用静态导出）

3. 修改Firebase配置文件
   编辑firebase.json，将public字段改为对应构建产物目录：

   • 静态导出场景配置：

     {
       "hosting": {
         "public": "out",
         "ignore": [
           "firebase.json",
           "**/.*",
           "**/node_modules/**"
         ],
         "rewrites": [
           {
             "source": "**",
             "destination": "/index.html"
           }
         ]
       }
     }
     

4. 重新部署到Firebase Hosting

   firebase deploy --only hosting
   

完成以上步骤后，访问Firebase Hosting地址即可看到与本地一致的Next.js页面。

内容的提问来源于stack exchange，提问作者Michel