You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js home文件夹动态路由失效问题求助

Next.js home文件夹下动态路由故障求助

我是Next.js新手,开发应用时遇到home文件夹下动态路由无法正常工作的问题。需求是通过storeId重定向至店铺页面,但尝试后要么出现404错误,要么弹出“Application error: a client-side exception has occurred (see the browser console for more information)”提示。此前在项目根目录实现相同逻辑时可正常运行,目前不清楚如何调试该问题,恳请帮助。

相关代码

/home/[storeId]/layout.tsx

import prismadb from "@/lib/prismadb";
import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

export default async function DashboardLayout({
 children,
 params,
}: {
children: React.ReactNode;
params: { storeId: string };
}) {
const { userId } = auth();

if (!userId) {
redirect("/sign-in");
}
const store = await prismadb.store.findFirst({
 where: {
   id: params.storeId,
   userId,
 },
 });

if (!store) {
 redirect("/home");
}

return (
 <>
   <div>Navbar</div>
   {children}
 </>
);
}

/home/[storeId]/page.tsx

import React from "react";

const Dashboard = () => {
return <div>Dashboard</div>;
};
export default Dashboard;

/home/layout.tsx

import prismadb from "@/lib/prismadb";
import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

export default async function SetupLayout({
 children,
}: {
 children: React.ReactNode;
}) {
const { userId } = auth();

if (!userId) {
 redirect("/sign-in");
}

const store = await prismadb.store.findFirst({
 where: {
   userId,
 },
});

if (store) {
 redirect(`/home/${store.id}`);
}

return <> {children} </>;
}

/home/page.tsx

"use client";
import { useEffect } from "react";

import { useStoreModal } from "@/hooks/use-store-modal";

const Home = () => {
 const onOpen = useStoreModal((state) => state.onOpen);
 const isOpen = useStoreModal((state) => state.isOpen);

 useEffect(() => {
  if (!isOpen) {
   onOpen();
  }
 }, [isOpen, onOpen]);
 return null;
export default Home;

/hooks/use-store-modal.tsx

import { create } from "zustand";

interface useStoreModalStore {
 isOpen: boolean;
 onOpen: () => void;
 onClose: () => void;
}

export const useStoreModal = create<useStoreModalStore>((set) => 
({
 isOpen: false,
 onOpen: () => set({ isOpen: true }),
 onClose: () => set({ isOpen: false }),
}));

错误截图

  • 页面错误提示:
    页面错误提示

  • 控制台错误:
    控制台错误

内容的提问来源于stack exchange,提问作者Jean Mako

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.23 19:18:25