Convierte un espacio de trabajo de Notion en un sitio web público personalizable para blogs, portafolios, documentación y landing pages, con Next.js y la API de Notion.
11,9 mil+9 esta semana14,7 milJavaScriptMITActualizado hace 5 días
transitive-bullshit/nextjs-notion-starter-kit
Kit de inicio de Next.js que convierte una página pública de Notion en un blog o portafolio listo para desplegar, con react-notion-x y Vercel.
Alternativa open source a:Notion Sites
- Estrellas
- 7,040
- Forks
- 5,637
- Issues abiertos
- 154
- Último commit
- hace 20 días
¿Qué es?
Next.js Notion Starter Kit usa Notion como sistema de gestión de contenidos. Solo tienes que indicar el ID de una página pública de Notion y la aplicación mostrará su contenido como un sitio web, incluidas las páginas anidadas y las bases de datos. react-notion-x se encarga de renderizar los bloques de Notion, y el sitio está diseñado para desplegarse en Vercel.
La configuración se concentra en un único archivo, site.config.ts, cuyo valor principal requerido es el ID de la página raíz de Notion. Las páginas obtienen automáticamente URL legibles, una tabla de contenidos que sigue el desplazamiento, imágenes para redes sociales Open Graph generadas automáticamente, modo oscuro y una búsqueda al estilo de command-K. Se puede habilitar la caché opcional de Redis para almacenar imágenes de vista previa generadas y agilizar las compilaciones, así como activar la analítica de Fathom o PostHog mediante variables de entorno.
El proyecto requiere Node.js 22 o posterior y se gestiona con pnpm. Los estilos del contenido de Notion se definen en un archivo CSS que aplica reglas a las clases de react-notion-x y a los nombres de clase de cada bloque.
Funciones clave
- 01Usa una página pública de Notion como fuente de contenido, configurada desde un único archivo.
- 02Renderiza el contenido de Notion mediante react-notion-x.
- 03Genera automáticamente URL legibles e imágenes de vista previa para redes sociales.
- 04Incluye una tabla de contenidos con seguimiento del desplazamiento y modo oscuro.
- 05Admite caché opcional de Redis y analítica de Fathom o PostHog.
Casos de uso
- Lanzar un blog personal con artículos escritos en Notion.
- Crear un portafolio o sitio para mostrar proyectos, gestionado desde una base de datos de Notion.
- Publicar documentación o una base de conocimiento pública a partir de páginas de Notion.
Inicio rápido
- 1
Haz un fork o clona el repositorio y configura rootNotionPageId en site.config.ts
- 2
Instala las dependencias (se requiere Node.js 22 o posterior)
pnpm install - 3
Ejecuta el servidor de desarrollo local para probar
pnpm dev - 4
Despliega en Vercel
pnpm deploy
Antes de usarlo
- La página raíz de Notion debe ser pública para que el sitio funcione.
- Para que funcionen las imágenes de vista previa en redes sociales, debes desactivar Vercel Authentication; de lo contrario, los rastreadores recibirán errores 401.
- La generación de imágenes de vista previa puede ser lenta si no configuras una instancia externa de Redis.
Temas
Preguntas frecuentes
- ¿Qué es nextjs-notion-starter-kit?
- Kit de inicio de Next.js que convierte una página pública de Notion en un blog o portafolio listo para desplegar, con react-notion-x y Vercel. Next.js Notion Starter Kit usa Notion como sistema de gestión de contenidos. Solo tienes que indicar el ID de una página pública de Notion y la aplicación mostrará su contenido como un sitio web, incluidas las páginas anidadas y las bases de datos. react-notion-x se encarga de renderizar los bloques de Notion, y el sitio está diseñado para desplegarse en Vercel.
- ¿nextjs-notion-starter-kit es gratuito? ¿Qué licencia tiene?
- nextjs-notion-starter-kit es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿nextjs-notion-starter-kit sigue mantenido?
- Mantenimiento activo. El último commit de nextjs-notion-starter-kit fue el 18 oct 2026.
- ¿Para qué puedo usar nextjs-notion-starter-kit?
- Lanzar un blog personal con artículos escritos en Notion. Crear un portafolio o sitio para mostrar proyectos, gestionado desde una base de datos de Notion. Publicar documentación o una base de conocimiento pública a partir de páginas de Notion.
- ¿Cómo se instala nextjs-notion-starter-kit?
- Haz un fork o clona el repositorio y configura rootNotionPageId en site.config.ts Instala las dependencias (se requiere Node.js 22 o posterior): pnpm install Ejecuta el servidor de desarrollo local para probar: pnpm dev Despliega en Vercel: pnpm deploy
- ¿Dónde consigo nextjs-notion-starter-kit?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/transitive-bullshit/nextjs-notion-starter-kit
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Plantilla de blog para Next.js que renderiza publicaciones MDX con Tailwind CSS y TypeScript, lista para desplegar en Vercel.
7,6 mil+4 esta semana1,4 milTypeScriptSin licenciaActualizado hace 6 días
Gestor web para blogs estáticos creados con frameworks como Hexo, Hugo y Valaxy, que permite editar entradas, imágenes y ajustes del sitio desde el navegador.
2 mil403PythonGPL-3.0Actualizado hace 15 días
Plantilla de chatbot con Next.js y Vercel AI SDK que usa Google Gemini de forma predeterminada y permite cambiar a otros proveedores de LLM.
1,4 mil+3 esta semana495TypeScriptOtherActualizado hace 15 días
Colección de paquetes de instrucciones instalables que aportan a los agentes de programación con IA conocimientos sobre Vercel y buenas prácticas de React/Next.js.
33,6 mil+379 esta semana2,9 milJavaScriptSin licenciaActualizado hace 10 días
Una plantilla inicial de Jekyll para crear sitios web académicos con publicaciones, CV, blog y páginas de proyectos.
16,3 mil+23 esta semana13 milHTMLMITBien mantenidoActualizado hace 3 días