Quiero representar datos estáticos que provienen de un archivo JSON o TypeScript y mostrárselos al usuario. ¿Tengo que usar getStaticProps o puedo simplemente importar los datos sin getStaticProps ? No me queda claro después de leer la siguiente documentación.
proyectos.tsx
const projects: [ { id: "6853939"; name: "Project 01"; title: "Title 01 "; previewImg: "/images/projectThumbnails/image01.jpg"; }, { id: "6853939"; name: "Project 02"; title: "Title 02 "; previewImg: "/images/projectThumbnails/image02.jpg"; } ]; export default projects;nombres.json
{ "names": [ { "name": "Full Name 01", "age": 34 }, { "name": "Full Name 02", "age": 22 }, ], }índice.tsx
import projects from "../data/projects.tsx"; import names from "../data/names.json"; const IndexPage = () => { return ( <> <div> {projects.map((i) => ( <div key={i.id}>{i.title}</div> ))} </div> <div> {names.names.map((i) => ( <div key={i.name}>{i.name}</div> ))} </div> </> ); };Depende totalmente de usted qué enfoque va a utilizar.
Con getStaticProps :
el servidor usa datos JSON para inyectar datos y crear caché
Sin getStaticProps :
El archivo JSON se inyectaría en el lado del cliente, sin almacenarse en caché
Recomiendo personalmente usar getStaticProps
Importando JSON en getStaticProps :
import yourJson from ('./somefile.json') export async function getStaticProps(context) { //use your json here return { props: {}, // will be passed to the page component as props } }