Cuando se habla de crear un blog, lo primero que muchos tienden a pensar es en plataformas ya hechas como WordPress. Estas herramientas son populares por su facilidad de uso, pero y... ¿Qué tal si te dijera que puedes crear tu propio blog programando, (Y sin hacerlo desde 0), manteniendo la flexibilidad que te entrega el hacerlo tu mismo?

En este artículo, te mostraré cómo utilizar Sanity y Next.js 14 para construir un blog increíblemente flexible y poderoso, combinando lo mejor de ambos mundos: la personalización y la eficiencia.

Primero lo primero: ¿Qué es Sanity?

Según ChatGPT (Mi mejor aliado): Sanity es una plataforma de gestión de contenido (CMS) basada en la nube que permite a los desarrolladores y editores crear, gestionar y distribuir contenido de manera eficiente. Lo que hace a Sanity destacar es su enfoque en la flexibilidad y la personalización, permitiendo a los usuarios definir esquemas de contenido personalizados y gestionar datos estructurados.

A esto le sumo de mi propia cosecha: Posee un editor en tiempo real, API, interfaz de usuario intuitiva y su propio back-office donde podrás administrar tu contenido.

Suena lindo, pero, a que se refiere el "basada en la nube", y es que si, para lograr crear nuestro blog usando esta herramienta deberemos crearnos una cuenta en sanity.io, pero no te asustes, tiene una suscripción totalmente gratuita que incluye todo lo necesario (e incluso más)

Puedes revisar aquí: https://www.sanity.io/pricing

Para no dejar desatendidos a quienes no saben que es Next.js y por alguna razón llegaron a este blog, aquí les va una descripción breve:

Next.js es un framework de React que permite desarrollar aplicaciones web rápidas y eficientes. Proporciona capacidades avanzadas como renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG), y soporte para el desarrollo de aplicaciones full-stack. Con Next.js, puedes crear aplicaciones web escalables y optimizadas para SEO, aprovechando sus herramientas y configuraciones integradas para mejorar el rendimiento y la experiencia del usuario.

Otra vez... gracias gpt.

En fin... mucho texto, manos a la obra

Creando nuestro proyecto con Next

Para comenzar vamos a crear un proyecto usando NextJS (Tambien puedes integrar Sanity en un proyecto ya existente).

Para ello usaremos el comando:

1npx create-next-app@latest mi-blog

Nos hará una serie de preguntas (blah blah blah, recomiendo usar todos los settings por default).

En este punto ya habremos creado nuestra app y podemos acceder a ella con el comando:

1cd mi-blog

Podemos levantar el proyecto usando el comando:

1pnpm dev

Si todo esto te parece un mundo completamente nuevo te recomiendo leer los primeros pasos de Next.js en: https://nextjs.org/docs

Ya teniendo el proyecto creado y andando nos vamos a deshacer de todo el boilerplate que genera Next.js, comenzaremos limpiando nuestro page.tsx de tal manera que quede así:

1// app/page.tsx
2export default function Page() {
3  return (
4    <main className="flex items-center justify-center min-h-screen">
5      Posts
6    </main>
7  )
8}

Luego nos desharemos de los estilos innecesarios y solo dejaremos:

1/* app/globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;

Habiendo hecho esto tendremos una página mucho más simple y limpia.

Ahora toca meter las manos en las configuraciones, concretamente el archivo nextjs.config.mjs

Como mencioné, Sanity se basa en la nube, por lo que nuestra base de datos con el contenido, y las imágenes, se almacenarán en su CDN.

Para este último punto en concreto, Next.js exige agregar el CDN de Sanity a las urls autorizadas para mostrar imágenes, quedando nuestro archivo de la siguiente manera:

1/* nextjs.config.mjs */
2
3/** @type {import('next').NextConfig} */
4const nextConfig = {
5  images: {
6    remotePatterns: [
7      {
8        protocol: "https",
9        hostname: "cdn.sanity.io",
10      },
11    ],
12  },
13  experimental: {
14    taint: true,
15  },
16};
17
18export default nextConfig;

Hasta aquí todo bien, pero, ¿Cuando instalaremos Sanity?, tranqui, ahora vamos a eso, para iniciar sanity en nuestro proyecto usaremos el siguiente comando:

1npx sanity@latest init --env --create-project "Mi Blog" --dataset production

Una vez más, nos bombardearán con preguntas, y una vez más, recomiendo usar todos los settings por default, en especial la que dice "Select project template to use"

Una vez finalizado, se nos creará un archivo .env (recomiendo renombrarlo. a .env.local) con las siguientes variables de entorno:

1# ./.env.local
2NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
3NEXT_PUBLIC_SANITY_DATASET="production"

Ya tenemos Sanity instalado 🥳!, para ver el back-office en donde administrarás tu contenido puedes visitar: http://localhost:3000/studio

Al ingresar encontrarás 3 secciones: Posts, Categories y Authors

Te recomiendo (pura recomendación por acá) que crees al menos un autor, una categoría y algunos posts, para que te familiarices con la plataforma y el esquema de los datos, además es una Mouskerramienta misteriosa que nos ayudará más tarde.

Una vez creemos nuestros datos, vamos a lo verdaderamente importante:

Si no tienes tu PC configurado en modo oscuro y no te quieres quemar las pestañas, el studio tiene modo oscuro, lo puedes activar haciendo click en tu usuario en la esquina superior derecha:

Ahora que ya no parecemos unos psicópatas usando el modo claro, debemos crear un token de lectura para que nuestra API de Next se pueda conectar a la API de Sanity y nos permita obtener los posts, para ello haremos lick en el botón Manage project

Se nos abrirá una nueva pestaña con nuestro panel de Sanity en donde debemos navegar a la sección API y bajar hasta la sección Tokens.

Haremos click en el botón Add API Token y crearemos un nuevo token con el permiso Viewer

Debemos copiar el token y almacenarlo en una variable de entorno llamada: SANITY_API_READ_TOKEN, nuestro archivo env quedaría así:

1# .env.local
2
3NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
4NEXT_PUBLIC_SANITY_DATASET="production"
5SANITY_API_READ_TOKEN="your-new-token"