Using Sanity Studio with Next.js: enhancing your web development

In modern web development, synergy between Sanity, a flexible CMS, and Next.js, a powerful Framework React, redefines the creation of applications. This tutorial details the integration of Sanity Studio into a Next.js project, offering a robust solution for content management.

>

What is Sanity?

Sanity is a CMS headless that facilitates the creation, management and distribution of content on multiple platforms. His flexibility and customization capacity make him a popular option.

What is Next.js?

Next.js, a React Framework, allows to build fast and optimized web applications. Its rendering functions on the server side (SSR) and genetic sites (SSG) make it ideal for projects that prioritize performance and SEO.

Installation and configuration

Step 1: Creating a Next.js

Start creating a Next.js. In its terminal:

<code class="language-bash">npx create-next-app@latest mi-app-sanity-next
cd mi-app-sanity-next</code>

Step 2: Installing Sanity Cli

Install the Sanity command line interface:

>

<code class="language-bash">npm install -g @sanity/cli</code>

Step 3: Creating a Sanity Project

In the same terminal, create a Sanity project:

<code class="language-bash">sanity init</code>

Follow the instructions, defining a content scheme according to your needs.

Sanity integration with Next.js

Step 4: Installing Sanity Units

In your next.js project, install the units to connect with Sanity:

>

<code class="language-bash">npm install @sanity/client @sanity/image-url</code>

Step 5: configuring the client Sanity

Create a sanity.js file at the root of your next.js:

<code class="language-javascript">// sanity.js
import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

const client = sanityClient({
  projectId: 'su_project_id', // Reemplace con su ID de proyecto
  dataset: 'production', // Modifique si necesario
  apiVersion: '2023-10-16', // Use la fecha de lanzamiento de la versión API
  useCdn: true, // `false` para datos sin caché
});

const builder = imageUrlBuilder(client);

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

Step 6: consulting content on Next.js

Use the Sanity client to consult content in its Next.js. Example on a page:

<code class="language-javascript">// pages/index.js
import client from '../sanity';

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

export async function getStaticProps() {
  const posts = await client.fetch('*[_type == "post"]');
  return {
    props: { posts },
  };
}

export default Home;</code>

Conclusion

Sanity Studio integration with Next.js provides a powerful and flexible tool for content management. Build rapid, efficient and easy to climb web applications. Start creating your next application!

I hope this guide has been useful. Share your experiences with Sanity and Next.js in the comments.

The above is the detailed content of Using Sanity Studio with Next.js: enhancing your web development. For more information, please follow other related articles on the PHP Chinese website!