¿Cómo crear nuevas páginas en NextJS?
Una nueva página en Next se crea mediante un nuevo archivo tsx que exporte un componente default dentro del directorio pages.
En nuestro caso vamos a crear dos páginas.
- La primera es /posts/:id en donde
ides el identificador del post. - La segunda es /:slug en donde el slug es el nombre del usuario (@username).
Creación de la página para mostrar cada uno de los posts
Creamos el archivo src/pages/post/[id].tsx. Si vemos el nombre del archivo esta encerrado entre corchetes, lo que quiere decir que su nombre es el nombre de la variable id que recibirá el valor del id del post. Por ejemplo /posts/100 -> id = 100.
export default function SinglePostPage() {
return <div>Página del post</div>
}
Ahora accedemos a la dirección localhost:3000/posts/100 y veremos que la pagina del post se despliega cualquiera sea el nombre del usuario.
Creación de la página del profile
Creamos el archivo src/pages/[slug].tsx, que en este caso tomara el valor cualquier otra ruta que no haya sido definida y lo asignará a la variable slug. Este es el que utilizaremos para el perfil. Por ejemplo /@marlon -> slug = @marlon.
import Head from 'next/head'
export default function ProfilePage() {
return (
<>
<Head>
<title>Create T3 App</title>
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex h-screen justify-center">
<div>Profile View</div>
</main>
</>
)
}
Personalizar el título de las páginas en NextJS
NextJS ofrece el componente Head para incluir en cada una de las páginas. Si dentro de este personalizamos el valor de la etiqueta title, el valor que utilicemos será el titulo que tome la página.
Si deseamos que el titulo se repita a través de todas las páginas, entonces tenemos que incluir este dentro del archivo src/pages/_app.tsx.
const MyApp: AppType = ({ Component, pageProps }) => {
return (
<ClerkProvider {...pageProps}>
<Head>
<title>My App</title>
<meta
name="description"
content="App generated by create-t3-app"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Toaster position="bottom-center" />
<Component {...pageProps} />
</ClerkProvider>
)
}