Si buscas una plantilla de inicio de blog moderna creada con Next.js, el proyecto NextJS Base Blog es un excelente punto de partida. Se trata de una aplicación de blog de código abierto con todas las funciones, desarrollada con Next.js 15, React 19, TypeScript y Tailwind CSS 4 .
El proyecto proporciona una arquitectura limpia, una interfaz de usuario moderna componentsy una capa de API simulada, lo que lo hace ideal para desarrolladores que desean crear un blog rápidamente sin configurar un backend.
Repositorio de GitHub: https://github.com/bfotool/nextjs-base-blog
Este proyecto es especialmente útil para:
Desarrolladores aprendiendo la aplicación Next.jsRouter
Crear un blog o sitio web de contenido rápidamente
Creación de un proyecto repetitivo de Next.js
Desarrollo de funciones de UI antes de conectar una API de backend real
Descripción general del proyecto
NextJS Base Blog está diseñado como una plantilla de blog lista para producción con muchas características comunes que se encuentran en los sitios web de contenido modernos.
El proyecto incluye:
una página de inicio con publicaciones destacadas
páginas de publicaciones de blog
filtrado de categorías
búsqueda de texto completo
paginación
Tabla de contenido
publicaciones relacionadas
tema oscuro/claro
Una de las partes más interesantes del proyecto es la capa de API falsa, que simula una API REST mediante interceptores de Axios. Esto permite a los desarrolladores crear y probar la aplicación sin necesidad de un servidor backend .
Características principales
Página principal
La página de inicio muestra varias secciones importantes:
publicación de héroe destacado
filtros de categoría
una cuadrícula de publicaciones de blog
navegación paginada
El diseño es totalmente adaptable y está optimizado tanto para computadoras de escritorio como para dispositivos móviles.
Página de publicación del blog
A cada artículo se puede acceder a través de una ruta dinámica:
/blog/[slug]
La página de publicaciones del blog incluye varias funciones útiles:
contenido completo del artículo
tabla de contenidos automática
tiempo estimado de lectura
botones para compartir en redes sociales
Sugerencias de publicaciones relacionadas
Estas características ayudan a crear una experiencia de lectura profesional similar a las plataformas de blogs modernas.
Páginas de categorías
Los usuarios pueden explorar las publicaciones por categoría.
Ejemplo de ruta:
/blog/category/[slug]
Esta función permite a los lectores explorar contenido dentro de temas específicos.
Funcionalidad de búsqueda
El proyecto incluye una página de búsqueda incorporada:
/search
La búsqueda admite:
resultados en tiempo real
entrada antirrebote
buscando en títulos, extractos y etiquetas
Esto mejora la usabilidad y ayuda a los usuarios a encontrar contenido relevante rápidamente.
Páginas Acerca de y Contacto
El proyecto también incluye páginas adicionales que suelen encontrarse en blogs profesionales.
Acerca de la página
La página Acerca de presenta:
el equipo
la historia del proyecto
valores fundamentales
Página de contacto
La página de Contacto incluye un formulario completamente validado con:
validación de formulario
notificaciones de brindis
retroalimentación de éxito y error
Compatibilidad con el modo oscuro
El blog admite el modo oscuro y el modo claro .
Las características incluyen:
detección automática de temas del sistema
alternancia manual
Persistencia del tema usando localStorage
Capa de API falsa(desarrollo sin backend)
Una de las partes más interesantes de este proyecto es su sistema Fake API .
En lugar de llamar a un servidor real, la aplicación utiliza interceptores Axios para simular las respuestas de la API REST.
Cómo funciona la API falsa
La instancia de Axios se crea en:
src/services/api-client.ts
Cuando la variable de entorno está habilitada:
NEXT_PUBLIC_USE_MOCK_API=true
Las solicitudes son interceptadas antes de llegar a la red.
Los controladores simulados devuelven respuestas falsas con retrasos realistas(200 a 600 ms).
Las respuestas se comportan como respuestas API reales.
Los datos simulados se almacenan en:
src/mocks/
Incluido:
publicaciones de muestra
autores
categorías
Puntos finales de API disponibles
La API simulada admite varios puntos finales:
| Método | Punto final | Descripción |
|---|---|---|
| CONSEGUIR | /publicaciones | Entradas de blog paginadas |
| CONSEGUIR | /publicaciones/destacadas | Publicaciones destacadas |
| CONSEGUIR | /publicaciones/:babosa | Entrada de blog única |
| CONSEGUIR | /categorías | Lista de categorías |
| CONSEGUIR | /autores | Lista de autores |
| CORREO | /contacto | Enviar formulario de contacto |
Pila de tecnología
El proyecto utiliza una pila frontend moderna.
| Capa | Tecnología |
|---|---|
| Estructura | Next.js 15 |
| Biblioteca de interfaz de usuario | Reaccionar 19 |
| Idioma | Mecanografiado |
| Estilo | Viento de cola CSS 4 |
| Cliente HTTP | Axios |
| Iconos | Lucide React |
| Pelusa | ESLint |
| Formato | Más bonita |
Esta pila proporciona:
seguridad de tipo fuerte
arquitectura mantenible
Experiencia de desarrollador moderna
Estructura del proyecto
La estructura del proyecto sigue una arquitectura limpia y escalable.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplicaciónRouter
El appdirectorio contiene todas las rutas de la aplicación.
Ejemplos:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Esto sigue la arquitectura de la aplicación Next.jsRouter introducida en versiones más nuevas de Next.js.
Componentes
La interfaz de usuario componentsestá organizada en grupos lógicos:
components/layout
components/common
components/blog
Esta estructura mantiene el código de UI organizado y es más fácil de mantener.
Capa de servicios
La servicescarpeta contiene lógica relacionada con la API:
Configuración del cliente API
servicio postal
servicio de categoría
servicio de formulario de contacto
Esta capa separa la lógica de obtención de datos de la interfaz de usuariocomponents, lo que mejora la escalabilidad.
Guía de instalación
Requisitos
Antes de comenzar, asegúrese de tener:
Node.js 18 o posterior
npm, hilo o pnpm
Clonar el repositorio
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instalar dependencias
npm install
Configurar variables de entorno
cp .env.example .env
Iniciar el servidor de desarrollo
npm run dev
Abra su navegador y visite:
http://localhost:3000
Scripts disponibles
| Dominio | Descripción |
|---|---|
| npm ejecutar dev | Iniciar servidor de desarrollo |
| npm ejecutar compilación | Crear una compilación de producción |
| npm ejecutar inicio | Iniciar el servidor de producción |
| npm ejecuta lint | Ejecutar ESLint |
| formato de ejecución de npm | Formatear código con Prettier |
| npm ejecuta comprobación de tipo | Ejecutar comprobaciones de TypeScript |
Cambiar a una API real
Si desea conectar el proyecto a una API de backend real, siga estos pasos.
Paso 1: Deshabilitar la API simulada
Editar el .envarchivo:
NEXT_PUBLIC_USE_MOCK_API=false
Paso 2: Establecer la URL base de la API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Paso 3: Coincidir con los tipos de datos
Asegúrese de que su API de backend devuelva datos que coincidan con las definiciones de TypeScript en:
src/types/index.ts
No se requieren cambios de código adicionales.
Personalización de contenido
El contenido simulado se puede editar dentro de:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Esto permite a los desarrolladores personalizar rápidamente el contenido de demostración.
Personalización del tema y la interfaz de usuario
El estilo global se puede encontrar en:
src/app/globals.css
El proyecto utiliza las siguientes fuentes:
DM Sans
JetBrains Mono
Puede modificar estilos o reemplazar fuentes según sus requisitos de diseño.
Conclusión
NextJS Base Blog es una plantilla de inicio potente y moderna para crear un blog con Next.js.
Las principales ventajas del proyecto incluyen:
pila de tecnología moderna
arquitectura limpia
API simulada para desarrollo
Fácil integración con API de backend reales
Interfaz de usuario adaptable y funciones modernas
Si está creando un blog, un sitio web para desarrolladores o una plataforma de contenido con Next.js, este repositorio puede ahorrarle un tiempo de desarrollo significativo.
Explora el código fuente aquí: https://github.com/bfotool/nextjs-base-blog