La pila es nextJS/react/typescript. Tengo un montón de publicaciones de blog en las que puedo establecer rutas dinámicamente sin ningún problema. Sin embargo, quiero crear algunas páginas que no usen Markdown. No he tenido mucha suerte encontrando buenos ejemplos de código. Parece que todos usan Remark/Grey Matter. He estado tratando de aplicar ingeniería inversa a este ejemplo oficial, pero no he tenido suerte. Hasta ahora, puedo obtener work/index.tsx para mapear todos los estudios de casos, pero no puedo enrutarlo a la página correcta. Te guardaré ejemplos de código porque es muy bueno para mi depuración. los ejemplos de código son básicamente varias versiones diferentes del código del ejemplo, pero sin eliminar markdownToHtml. Me imagino que la solución es más una técnica específica que un bloque de código.
Jerarquía de archivos:
_case-studies/ │ caseStudyA.tsx │ caseStudyB.tsx │ caseStudyC.tsx pages/ │ work/ │ │ index.tsx │ │ case-studies/ │ │ │ [case-study].tsx lib/ │ api_case-studies.tsx types/ │ caseStudy.tsxEDITAR (ACLARACIÓN):
Todas las páginas tienen contenido único, ya que no es el típico paso de accesorios a un [estudio de caso] donde el diseño se ve igual, pero hago algo como {caseStudy.title} para simplemente actualizar el título.
De acuerdo, entonces, por ahora, descartemos por completo la idea del descuento y pretendamos que nunca lo mencioné. Mi nueva estructura de archivos es la siguiente:
– lib/ – api_case-study.tsx – pages/ – work/ – index.tsx – [case-study] – case-studies/ – ExampleA.tsx – ExampleB.tsx – ExampleC.tsxEn index.tsx, recorrería todos los estudios de casos. Puedo hacer que haga eso ahora y obtener todos los slugs y vincularlos, pero no puedo hacer que devuelva el título prop y no puedo hacer que la página en sí se represente sin solo cargar el diseño predefinido de [caso -estudiar]. ¿Tiene sentido?
EDITAR 2 (Ejemplo de código):
Aquí está el estado actual de mi código, por favor sea amable: github nota esencial: cambié las convenciones de nomenclatura de 'estudio de caso' a 'proyecto' desde la publicación original
Intenta exportar constantes como title desde sus páginas dentro de /case-studies/ , pero luego dentro de getStaticPaths en api_project.tsx realmente no puede acceder a esas variables dentro getProjectBySlug porque no las exporta como export const title = "title" ( getStaticProps se usa para obtener datos para construir la página, no para exportar accesorios ni nada por el estilo).
Supongo que desea obtener estos metadatos dinámicamente, por lo que si no desea usar materia gris y exportar variables no es realmente una opción, ya que necesitaría usar importaciones dinámicas de JS, lo que sería una exageración. le aconsejo que use un CMS gratuito y alojado como contenido y luego almacene y obtenga los metadatos del proyecto allí, o simplemente cree un directorio como /data/case-studies-meta.json con una configuración como:
[ { slug: "ExampleA", title: "Title of Example A" }, { slug: "ExampleB", title: "Title of Example B" } ] Suponiendo que tiene las dos páginas ExampleB.tsx y ExampleA.tsx dentro case-studies .
Y luego impórtelo dentro de su archivo api_project.tsx :
const ProjectMeta = require("./data/case-studies-meta.json"); // adjust path to directory structure y dentro de su getProjectBySlug , ahora puede buscar los metadatos en función del slug que le está pasando. Tenga en cuenta que deberá asegurarse de que el slug dentro /data/case-studies-meta.json sea el mismo que el nombre de archivo real de la(s) página(s) .tsx del estudio de caso:
ProjectMeta.forEach((entry) => { if(entry.slug.toLowerCase() === slug.replace(/\.tsx$/, '').toLowerCase(){ items.title = entry.title; // or make the items a let and do items = {...post} to copy all keys } }) Esto debería funcionar, pero no es realmente óptimo ya que debe recordar actualizar el slug dentro data/case-studies-meta.json cada vez que cambia el nombre/elimina/agrega una nueva página dentro case-studies .