Tengo una ruta dinámica en la raíz de mi carpeta de páginas en Siguiente; así src/pages/[page].js
Esto funciona muy bien para cualquier cosa que realmente tenga un slug, por ejemplo, example.com/my-page devolverá los datos correctos para my-page .
Quiero poder acceder a un slug llamado homepage de inicio cuando visite la raíz del sitio web. Por lo tanto, visitar example.com en realidad devolvería la página de homepage .
¿Cómo se puede hacer esto? Aquí hay una versión simplificada de mi componente:
import React from "react"; import { fetchAPI } from "../lib/api"; const Page = () => <p>Content...</p>; export default Page; export async function getStaticPaths() { const pages = await fetchAPI("/pages"); return { paths: pages.map((page) => ({ params: { page: page.slug, }, })), fallback: false, }; } export async function getStaticProps({ params }) { const pages = await fetchAPI(`/pages?slug=${params.page}`); return { props: { page: pages[0] }, revalidate: 1, }; }En getStaticProps , su params.page no estará definido en su página de inicio porque está usando una ruta dinámica allí, por lo que solo necesita manejar ese caso:
export async function getStaticProps({ params }) { const pageSlug = params.page ?? "homepage" const pages = await fetchAPI(`/pages?slug=${pageSlug}`); return { props: { page: pages[0] }, revalidate: 1, }; }OP: en su comentario a continuación, dijo " ... pero si un usuario visitó algo como example.com/asdopmsaiond, ¿no mostraría también la página de inicio en este caso en lugar de un 404 ". Si bien mi código anterior le dará el slug de la página de inicio cuando un usuario visite la página de inicio, parece que también desea mostrar la página de inicio cuando un usuario visita cualquier página que realmente no existe. En general, hay tres formas de hacerlo:
Puede redirigir al usuario a la página de inicio si no se encuentra ninguna página al verificar la variable de sus pages ; si no tiene un valor de pages[0] válido, sabrá (suponiendo que su API esté bien configurada) que ninguna página fue encontrado y luego puede redirigir a la página de inicio:
export async function getStaticProps({ params }) { const pageSlug = params.page ?? "homepage" const pages = await fetchAPI(`/pages?slug=${pageSlug}`); if(!pages || !pages.length > 0) { return { redirect: { destination: '/', permanent: false, }, } } return { props: { page: pages[0] }, revalidate: 1, }; }Digo que esto es "preferido" porque no resultará en penalizaciones de contenido duplicado de SEO como lo haría la última opción, y no resultará en ningún procesamiento adicional o llamadas API.
Puede crear un archivo 404.js (o 404.tsx) que Next usa cuando necesita mostrar una página 404. Este archivo también toma getStaticProps que puede usar para redirigir a la página de inicio:
// 404.js export default function FourOhFourPage() { return null } export async function getStaticProps({ params }) { return { redirect: { destination: '/', permanent: false, }, }; } También puede volver a enviar su llamada a la API con el slug de la homepage de inicio si no se encuentran pages en su llamada a la API y luego mostrar el contenido de esa homepage de inicio. Esto daría como resultado una segunda llamada a la API y le gustaría incluir una URL canónica en su página de inicio para no recibir penalizaciones por contenido duplicado para SEO:
export async function getStaticProps({ params }) { const pageSlug = params.page ?? "homepage" // Changed `pages` from `const` to `let` so we can modify it // if we don't get the desired result from the api call let pages = await fetchAPI(`/pages?slug=${pageSlug}`); if(!pages || !pages.length > 0) { pages = await fetchAPI(`/pages?slug=homepage`); } return { props: { page: pages[0] }, revalidate: 1, }; }Puede configurar rewrites en el archivo next.config.js para asignar la ruta / a la ruta de destino /homepage .
// next.config.js module.exports = { async rewrites() { return [ { source: '/', destination: '/homepage' } ]; } }; Esto no cambiará la URL visible ( / ) en la barra de direcciones.