Empezar tutorial interactivo

← Volver a Proyectos

Crea un Blog desde Cero con Next.js y Markdown

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

📝 Instrucciones

🌱 ¿Cómo iniciar este proyecto?

Este proyecto no cuenta con un repositorio base de 4Geeks. En su lugar, sigue la documentación oficial de Next.js para crear un repositorio básico.

Te recomendamos abrir el proyecto usando Codespaces (recomendado) o Gitpod. Alternativamente, puedes trabajar localmente si tienes Node.js instalado.

⚠ Asegúrate de instalar las dependencias necesarias al iniciar tu proyecto con npm install.

📝 Instrucciones

Paso 1: Configura la Base del Blog

1npx create-next-app@latest blog

Paso 2: Estructura Básica del Blog

Paso 3: Genera Contenido para el Blog con IA

Paso 4: Renderiza el Contenido en el Blog

Ejemplo para leer archivos Markdown debes tener una función similar a esta:

1import fs from 'fs'; 2import path from 'path'; 3import matter from 'gray-matter'; 4 5export async function getStaticProps() { 6 const filePath = path.join(process.cwd(), 'posts', 'ejemplo.md'); 7 const fileContent = fs.readFileSync(filePath, 'utf8'); 8 const { data, content } = matter(fileContent); 9 10 return { 11 props: { 12 data, 13 content, 14 }, 15 }; 16}

Paso 5: Diseña y Mejora la Interfaz

Paso 6: Funcionalidades Avanzadas (Opcional)

Bonus: Publica tu Blog

Explora diferentes formas de mejorar tu blog para que sea más completo y funcional.

Regístrate para obtener acceso gratis a este proyecto

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Regístrate para obtener acceso gratis a este proyecto

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Material de apoyo

Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales

Lección

Aprender React Aquí: Tutorial de React JS

Ejercicio

Curso de React.js desde cero y ejercicios interactivos

Proyecto

¡Construye una App de Comercio Electrónico Básica con Next.js!