Next.js 13.3.1部署Firebase后动态路由出现404问题求助

问题描述 #

本地执行npm run dev后，访问http://localhost:3000/members/AA66HB97能正常显示页面，但执行npm run build和firebase deploy --only hosting部署到Firebase Hosting后，访问https://myapp.web.app/members/AA66HB97出现「404 | This page could not be found」错误。其他页面在本地和服务器均正常运行。

相关文件结构 #

app
    members
        [memberID]
            page.tsx

page.tsx 代码 #

import firebase from "../../../firebase/initFirebase";
import DrillManage from '../../components/drillMng'


interface pageProps {
    params: {
        memberID: string
    }
}


export default async function MemberPage({ params: { memberID } }: pageProps) {
    const member = await getMemberData(memberID)

    return (
        <div className='colnLst'>
            <DrillManage usrID={JSON.parse(member.userID)} />
        </div>
    )
} /* End of MemberPage */


async function getMemberData(id:string) {
    let dbRef = firebase.database().ref('Members'),
            resultStr = ''
    await dbRef.child(id)
    .once('value', (snapshot) => {
        if (snapshot.hasChildren()) {
            snapshot.forEach((item: firebase.database.DataSnapshot) => {
                resultStr = JSON.stringify(item)
            })
        }
    })

    return {
        id,
        memberID: id,
        userID: resultStr
    }
} /* End of getMemberData */

问题原因及解决方法 #

Firebase Hosting 默认不会自动处理 Next.js App Router 的动态路由，需要配置重写规则或调整导出设置来适配动态路由访问。

1. 配置 firebase.json 重写规则 #

在项目根目录的firebase.json文件中，给hosting添加rewrites规则，让所有路由请求都转发到Next.js生成的index.html：

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

注意：Next.js 13+ 使用app目录时，npm run build会生成静态的out目录，所以public字段必须指向out。

2. 确认Next.js静态导出配置 #

在next.config.js中添加output: 'export'配置，确保Next.js以静态导出模式构建：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

该配置会让Next.js在构建时生成完全静态的文件目录，适配Firebase Hosting这类静态托管服务。

3. 预生成动态路由页面（可选） #

如果你的成员ID是已知的固定列表，可以在app/members/[memberID]/page.tsx中添加generateStaticParams函数，预生成所有动态路由页面：

export async function generateStaticParams() {
  // 从数据库获取所有成员ID
  const dbRef = firebase.database().ref('Members');
  const snapshot = await dbRef.once('value');
  const members = snapshot.val();
  
  return Object.keys(members).map(id => ({
    memberID: id
  }));
}

执行npm run build时，Next.js会自动为每个成员生成对应的静态页面，部署后直接访问不会出现404。

4. 验证部署流程 #

确保部署前完成以下步骤：

• 执行npm run build确认out目录生成完整
• 执行firebase deploy --only hosting时无报错
• 部署后清空浏览器缓存再测试访问

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