El caso de uso es para abrir

http://localhost:3000/users/101

Así es como me gustaría que fuera el diseño de mi página y Element extraiga el segundo fragmento de código en [id].tsx

 import CTASection from '../../components/samples/CTASection'; import { User } from "../../interfaces"; import { GetStaticProps, GetStaticPaths } from "next"; import Element from "pages/users/element"; const Element = ({ item, errors }: Props) => { return ( <Box> <Element /> <CTASection /> </Box> ) } export default Id; export const getStaticPaths: GetStaticPaths = async () => { // Get the paths we want to pre-render based on users const paths = sampleUserData.map((user) => ({ params: { id: user.id.toString() }, })); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }) => { try { const id = params?.id; const item = sampleUserData.find((data) => data.id === Number(id)); return { props: { item } }; } catch (error) { return { props: { errors: 'ERROR Loading Data' } }; } };

Sin embargo, solo representa los parámetros de consulta si inserto mi página element.tsx de una manera no modular como esta:

 ... return ( <Box> <Grid gap={2}> <Heading as="h2" fontSize={{ base: "lg", sm: "3xl" }}> Verifikation </Heading> <Box backgroundColor={colorMode === "light" ? "gray.200" : "gray.500"} padding={4} borderRadius={4} > <Box fontSize={textSize} title={`${ item ? item.name : "User Detail" }`}> {item && <ListDetail item={item} />} </Box> </Box> </Grid> <CTASection /> </Box> ) ...

Este es el ListDetail.tsx:

 import * as React from "react"; import { User } from "../../interfaces"; type ListDetailProps = { item: User; }; const ListDetail = ({ item: user }: ListDetailProps) => ( <div> <h1>User: {user.name}</h1> <p>ID: {user.id}</p> </div> ); export default ListDetail;