👀 Views: 186 💬 Answers: 1 📅 Created: 2025-06-14

next.js react static-generation JavaScript

I'm wondering if anyone has experience with I need some guidance on I've searched everywhere and can't find a clear answer. I'm struggling with a Next.js application where I want to statically generate pages using nested route parameters. My folder structure looks like this: ``` /pages └── posts └── [id] └── [commentId].js ``` In `[commentId].js`, I'm trying to fetch data based on both `id` and `commentId` using `getStaticPaths` and `getStaticProps`. Here's the code I'm using: ```javascript // pages/posts/[id]/[commentId].js import { useRouter } from 'next/router'; export async function getStaticPaths() { const response = await fetch('https://api.example.com/posts'); const posts = await response.json(); // Create paths for all post ids and their comment ids const paths = posts.map(post => post.comments.map(comment => ({ params: { id: post.id.toString(), commentId: comment.id.toString() } })) ).flat(); return { paths, fallback: false }; } export async function getStaticProps({ params }) { const { id, commentId } = params; const response = await fetch(`https://api.example.com/posts/${id}/comments/${commentId}`); const comment = await response.json(); return { props: { comment } }; } const CommentPage = ({ comment }) => { return <div>{comment.content}</div>; }; export default CommentPage; ``` However, when I try to access a route like `/posts/1/2`, I get a 404 behavior even though the API returns valid data for that route. I ensured that the `getStaticPaths` is returning the correct paths by logging it, and it appears to be fine. I also confirmed that both `id` and `commentId` exist in the fetched data. I tried switching the API to a local JSON file to rule out network issues, but the question continues. I also checked for typos in the parameter names and ensured they match the actual API response. Additionally, I verified that the Next.js version I'm using is 13.0.0. Is there something I'm missing here related to nested dynamic routes in Next.js? Any help would be greatly appreciated! For context: I'm using Javascript on Windows. This is for a mobile app running on Linux. Any advice would be much appreciated. This is part of a larger web app I'm building. Is there a simpler solution I'm overlooking?