**Reto Cumplido y un poco mas **
Introducción a Next.JS
¿Dónde aprender Next.js actualizado?
¿Qué es Next.JS?
Creando nuestra primera página
Styled JSX
Server Side Rendering
Aprende qué es Server Side Rendering
Intro a getInitialProps
Utilizando el componente Link
Recibiendo Parámetros
Performance de Get Initial Props
Vista de Podcasts
Componentes Reutilizables
Creando componentes en React
Reorganizar la vista de podcasts
Navegación Avanzada
Gestionando Errores
Personalizando errores
¿Cómo diseñar URLs?
Configurando Next Routes
Implementando Next Routes
Vistas Híbridas
Implementar el Modal
Agregando un loader
Publicando nuestra app
Mejores prácticas en Github
Publicar la app con now
Conclusiones del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Este reto pone a prueba todo lo que venimos aprendiendo hasta el momento en el curso y va a requerir testear todo; desde crear páginas nuevas, hasta tomar atributos y hacer request a una API.
Aportes 26
Preguntas 1
**Reto Cumplido y un poco mas **
Listo 😄 Lo bueno de haber tomado cursos anteriores como React, Redux, Fundamentos de JavaScript, etc. es que entiendo perfectamente qué hace el código, no siento que solo copio y pego.
Comparto como me quedo la pagina Podcast!
Asi quedo mi página de Podcast! Trate de basarme un poco en PocketCasts 😄
para los que les suceda como a mi que cuando accedían a la api de audioboom se les veía lineas ilegibles de JSON, el profesor utiliza la extensión de chrome JSONView, aquí les dejo en link para agregarla:
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related
Hice un pequeño cambio solo para traer los podcast en español jeje:
'https://api.audioboom.com/channels/recommended?category_ids[]=179'
dato adicional uso este color en el header y en background de la clase clip #4a148c
 => {
const { audioClip } = props;
return(
<div className="flex column">
<Head>
<title>Heart Radio - Podcast</title>
</Head>
<Header />
<div className="podcast justify-center">
{
<h2>
{ audioClip.title }
</h2>
}
</div>
</div>
);
}
Podcast.getInitialProps = async ({ query }) => {
const idAudio = query.id;
const response = await request.get(`/audio_clips/${idAudio}.mp3`, '');
return { audioClip: response.body.audio_clip };
}
PD: Utilizen el fetch, aquí utilizo otro cliente HTTP
les comparto mi resultado que buen comienzo con Next
Genail!!
Usando variables dinamicos en css (background-image:url($image-portada))
Vamooos!!
💪 💪
Reto cumplido! No se veía la imagen y tuve modificar picture.
picture
background: inherit
height: 250px
padding: 10px
💚😎**Reto Completado!**💚😎
Hasta ahora todo se me ha hecho algo fácil, menos lo de css, creo que tendré que seguir el curso de CSS. 😄
Hola, tengo un problema, en algunos podcast todo funciona correctamente, mientras que en otros, me da este error, alguno tienen un solución a esto ?
**
Reto completado 🤘
Todo el reto lo monte en CodeSanBox, les comparto la URL correspondiente a la practica
Codigo
https://codesandbox.io/s/taller-de-next-cf1dj
Montado en un server
https://cf1dj.sse.codesandbox.io/
Reto Logrado
Hola, alguien sabe porque este error:
Así quedo mi podcast page:
Les comparto como me quedo y para hacer el link de volver hice lo siguiente
<header>
<Link href={`/channel?id=${podcast.channel.id}`}>
<a>← Volver</a>
</Link>
</header>
Roberto usó una API muy enredada para este proyecto, me a llevado tiempo entender el JSON. Para la próxima una más sencilla, como una de pokemón, jajaja.
Mi Plataforma:
Mi codigo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?