Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

242
Vistas
Luchando para convertir "getStaticProps" .jsx a tsx en la aplicación Nextjs

Es una aplicación que consume Printifull API que funciona bien en .jsx con el siguiente código:

 import axios from "axios"; export default function ApiTest(props) { console.log(props); return( <></> ( } export async function getStaticProps() { const headers = { Authorization: `Bearer ${process.env.PRINTIFUL_KEY}` }; const res = await axios.get("https://api.printful.com/store/products", { headers, }); const data = res.data; return { props: data, }; }

Así es como se ve la consola con este script:

ingrese la descripción de la imagen aquí

Cuando intento convertir a .tsx no funciona, el siguiente código muestra la forma en que intento hacerlo.

 import { GetStaticProps } from "next"; import axios from "axios"; export default function ProductList(props: any) { console.log(props); return ( <></> ) } interface Props { headers: any; res: any; data: any; } const token = process.env.PRINTIFUL_KEY as string; const url = "https://api.printful.com/store/products"; export const getStaticProps: GetStaticProps<Props> = async () => { const headers = { Authorization: `Bearer ${token}` }; const res = await axios.get(url, { headers, }); const data = res.data; return { props: data, }; };

Ahora, mira mi consola. No funciona mostrando el contenido de la API. ingrese la descripción de la imagen aquí

Espero acercarme a la solución.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Es la forma que encontré para que funcione:

 import { InferGetServerSidePropsType } from "next"; type Product = { list: object[]; result: Array<{ id: number; name: string; thumbnail_url: string; }>; }; export const getStaticProps = async () => { const headers = { Authorization: `Bearer ${process.env.PRINTIFUL_KEY}` }; const res = await fetch("https://api.printful.com/store/products", { headers, }); const products: Product = await res.json(); return { props: { products: products.result, }, }; }; export default function TypeTest({ products, }: InferGetServerSidePropsType<typeof getStaticProps>) { console.log(products); return ( <> </> ); }

ingrese la descripción de la imagen aquí

Sigo buscando soluciones alternativas.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda