// /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 }),
}));
https://i.sstatic.net/823tS4qT.png
I am facing issues with creating a dynamic route in my NextJs App within the "home" folder. I tried to implement a redirection to a store page based on the store id but encountered errors such as a 404 message or a client-side exception. While I was successful when implementing it at the project root level, I'm struggling to debug and resolve the issue within the home folder due to my limited experience with NextJs. Any assistance would be greatly appreciated. Thank you.