Soy nuevo en NextJS. Estoy trabajando en una página simple en la que necesito recuperar datos de mi aplicación de back-end. Mi aplicación backend es una aplicación totalmente separada escrita en go. Mi entendimiento es que debo usar getServerSideProps para obtener datos del servidor en carga, por lo que tengo lo siguiente:
myProject/pages/category/new.js :
export default function AddNewCategory(data) { ... } export const getServerSideProps = async () => { const data = await getAllCategories(); console.log(await data) return { props: { data: { data } } }; }; myProject/api/category.js :
import axios from "axios"; // getAllCategories returns a list of all active categories export const getAllCategories = async() => { axios.get("http://127.0.0.1:8080/api/v1/categories") .then(function (response) { console.log(response.data) return response.data; }) .catch(error => { console.error("error") console.log(error) }) } Como puede ver, tengo una declaración de impresión en getAllCategories que imprime:
{ data: [ { id: 1, name: 'Pop', slug: 'pop', description: 'Pop', parent: 0, active: true, created_at: '2022-05-03T19:50:00-04:00', updated_at: '2022-05-03T19:50:00-04:00', deleted_at: null }, { id: 3, name: 'Pop 2', slug: 'pop-2', description: 'Pop', parent: 0, active: true, created_at: '2022-05-03T19:50:24-04:00', updated_at: '2022-05-03T19:50:24-04:00', deleted_at: null } ] }sin embargo, recibo el siguiente error:
error - Error: Error al serializar
.data.datadevueltos desdegetServerSidePropsen "/category/new". Motivo:undefinedno se puede serializar como JSON. Utilicenullu omita este valor.
Vi que debería intentar convertir los datos en una cadena y luego volver a json:
return { props: { data: JSON.parse(JSON.stringify(data)) } };pero cuando hago esto, obtengo un error diferente:
error - SyntaxError: token u inesperado en JSON en la posición 0
estoy usando next@12.1.5
¿Tienes idea de lo que está pasando?
Creo que tienes que convertir tu json en un objeto javascript con .json() . El siguiente código proviene de la documentación de nextjs .
export async function getServerSideProps() { // Fetch data from external API const res = await getAllCategories(); const data = await res.json() // Pass data to the page via props return { props: { data } } }EDITAR
En este caso particular, no fue necesario agregar const data = await res.json() porque la solicitud se realiza a través de axios, y en axios las respuestas ya se sirven como objeto javascript, por lo que no es necesario analizar.