Soy relativamente nuevo en Next, pero aquí está el problema. Tengo un archivo JSON estático que está en la raíz del directorio de mi proyecto y es el siguiente
{"data":[{"id":1,"attributes":{"name":"Test Product 1","content":"Stvarno ne znam sta bi dodao ovdje jer samo testiram","meta_description":"Opis koji moze da stoji u meti / SEO i to","meta_title":"Testni Product - Lion Kingdom","price":12.99,"slug":"test-product-1","createdAt":"2022-04-17T12:12:36.787Z","updatedAt":"2022-04-17T12:12:39.540Z","publishedAt":"2022-04-17T12:12:39.531Z"}},{"id":2,"attributes":{"name":"Test Product 2","content":"Jos jedan testni post da testiram producte v2","meta_description":"Neki opis za metu","meta_title":"Testni Product 2 - Lion Kingdom","price":49700,"slug":"test-product-2","createdAt":"2022-04-17T12:15:04.241Z","updatedAt":"2022-04-17T12:15:05.078Z","publishedAt":"2022-04-17T12:15:05.075Z"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}Ahora estoy tratando de pasarlo como un accesorio para usarlo en el sitio web, pero no puedo hacerlo por alguna razón desconocida, el compilador no muestra errores, pero el div todavía aparece vacío y no obtiene nada del json. Así es como lo configuro a continuación
Definiendo arriba
import products from '../products.json'y luego en el cuerpo
export default function index() { return ( <div> <Head> <title> ECommerce Alpha</title> <link rel="icon" href="/favicon.ico" /> </Head> {products.data.map(product => { <div key={product.attributes}> <div>{product.attributes.name}</div> </div> })} </div> ) }El resultado es todavía una página en blanco, si alguien pudiera señalar por qué lo siguiente no es obtenerlo estáticamente de un archivo, se lo agradecería :)
Estás viendo una página en blanco porque a la función de flecha de tu map() le falta una declaración de return explícita:
{products.data.map((product) => { // this is a block body (ie, opened with a brace), so you need a `return` return ( <div key={product.id}> <div>{product.attributes.name}</div> </div> ); })} Puede hacer que el return sea implícito al no usar llaves:
{products.data.map((product) => ( // group with parentheses instead <div key={product.id}> <div>{product.attributes.name}</div> </div> ))}