Sanity Vision: Configuraciones y Uso en un Proyecto de Next.js

Introducción

Sanity Vision es una herramienta poderosa que forma parte del ecosistema de Sanity.io, diseñada para facilitar la visualización y consulta de datos en tiempo real. Al integrarlo con un proyecto de Next.js, puedes crear aplicaciones web dinámicas y personalizadas que aprovechan al máximo el contenido estructurado que Sanity ofrece. En este artículo, exploraremos cómo configurar Sanity Vision y utilizarlo en la parte frontal de un proyecto de Next.js.

¿Qué es Sanity Vision?

Sanity Vision es una interfaz de usuario que permite a los desarrolladores y editores consultar y visualizar datos de Sanity en tiempo real. Proporciona una forma intuitiva de interactuar con el contenido, lo que facilita la creación de consultas personalizadas y la exploración de los datos disponibles. Esto es especialmente útil en proyectos donde el contenido puede cambiar frecuentemente y se necesita una forma rápida de acceder a él.

Configuración Inicial

Paso 1: Crear un Proyecto de Sanity

Primero, necesitas crear un nuevo proyecto de Sanity. Abre tu terminal y ejecuta:

npm install -g @sanity/cli
sanity init

Sigue las instrucciones para configurar tu proyecto y elige un esquema de contenido que se adapte a tus necesidades.

Paso 2: Instalar Next.js

A continuación, crea un nuevo proyecto de Next.js:

npx create-next-app@latest my-nextjs-sanity-app
cd my-nextjs-sanity-app

Paso 3: Instalar Dependencias de Sanity

Dentro de tu proyecto de Next.js, instala las dependencias necesarias para conectar Sanity:

npm install @sanity/client @sanity/image-url

Paso 4: Configurar el Cliente de Sanity

Crea un archivo sanity.js en la raíz de tu proyecto de Next.js para configurar el cliente de Sanity:

// sanity.js
import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

const client = sanityClient({
  projectId: 'tu_project_id', // Reemplaza con tu ID de proyecto
  dataset: 'production', // Cambia si es necesario
  apiVersion: '2023-10-16', // Usa la fecha en la que se lanzó la versión de la API
  useCdn: true, // `false` si necesitas datos frescos
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);
export default client;

Usando Sanity Vision en el Frontend de Next.js

Paso 5: Consultar Datos con Sanity Vision

Para utilizar Sanity Vision, primero debes habilitarlo en tu proyecto de Sanity. Esto se hace en el archivo de configuración de Sanity, donde puedes definir las consultas que deseas realizar. Por ejemplo, si deseas consultar publicaciones de un blog, puedes crear una consulta como esta:

// queries.js
export const allPostsQuery = `*[_type == "post"]{
  _id,
  title,
  body,
  mainImage {
    asset -> {
      _id,
      url
    }
  }
}`;

Paso 6: Integrar la Consulta en Next.js

Ahora, puedes utilizar esta consulta en tu componente de Next.js. Aquí hay un ejemplo de cómo hacerlo:

// pages/index.js
import client from '../sanity';
import { allPostsQuery } from '../queries';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Mis Publicaciones</h1>
      {posts.map((post) => (
        <div key={post._id}>
          <h2>{post.title}</h2>
          <img src={urlFor(post.mainImage)} alt={post.title} />
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const posts = await client.fetch(allPostsQuery);
  return {
    props: { posts },
  };
}

export default Home;

Paso 7: Usar Sanity Vision para Consultas en Tiempo Real

Para aprovechar al máximo Sanity Vision, puedes utilizar su interfaz para crear y probar consultas en tiempo real. Esto te permite ajustar tus consultas y ver los resultados instantáneamente, lo que es especialmente útil durante el desarrollo. Simplemente abre Sanity Studio y navega a la sección de Vision para comenzar a experimentar con tus consultas.

Conclusión

Integrar Sanity Vision en un proyecto de Next.js no solo mejora la forma en que gestionas y consultas el contenido, sino que también te permite crear aplicaciones web dinámicas y personalizadas. Con la capacidad de realizar consultas en tiempo real y visualizar datos de manera efectiva, Sanity Vision se convierte en una herramienta invaluable para desarrolladores y editores.

Si estás listo para llevar tu proyecto al siguiente nivel, considera implementar Sanity Vision y explora todas las posibilidades que ofrece para la gestión de contenido en tus aplicaciones Next.js.

---

Si tienes preguntas o comentarios sobre el uso de Sanity Vision con Next.js, ¡no dudes en dejarlos a continuación!