How to Set Up Next.js 14 with Sanity: A Comprehensive Guide

Step 1: Setting Up a New Next.js 14 Project

Before diving into the integration with Sanity, we need to set up a new Next.js 14 project.

1. Install Node.js and npm
   Ensure you have Node.js installed on your machine. If not, download it from the official website . The Node Package Manager (npm) comes bundled with Node.js.
2. Create a Next.js Project
   Open your terminal and run the following commands:This will create a new Next.js 14 project in a directory named my-nextjs-project.

npx create-next-app@latest my-nextjs-project
# or
yarn create next-app my-nextjs-project
# or
pnpm create next-app my-nextjs-project
# or
bunx create-next-app my-nextjs-project
cd my-nextjs-project

1. Start the Development Server
   To ensure everything is set up correctly, start the development server:Open http://localhost:3000 in your browser, and you should see the default Next.js welcome page.

pnpm run dev

Step 2: Installing and Setting Up Sanity

Next, we'll integrate Sanity into our Next.js project to manage our content.

1. Install the Sanity CLI
   In your terminal, run:

pnpm install -g @sanity/cli

1. Create a New Sanity Project
   Navigate to your project directory and create a new Sanity project:Follow the prompts to set up your Sanity project. You can choose a template or start with a clean project. This will generate a sanity folder in your project directory.

sanity init --coupon sonar --create-project "my-nextjs-project"

1. Deploy the Sanity Studio
   Once your project is set up, you can deploy your Sanity Studio to the web:Sanity will provide you with a URL where you can access your CMS.

sanity deploy

Step 3: Connecting Sanity with Next.js

With both Next.js and Sanity set up, the next step is to connect them.

1. Install the Required Dependencies
   In your Next.js project, install the Sanity client:

pnpm install @sanity/client

1. Create a Sanity Client
   In your Next.js project, create a new file called sanity.js in the lib directory:Replace 'your-project-id' with your actual Sanity project ID, which you can find in the sanity.json file or in your Sanity dashboard.

import sanityClient from '@sanity/client';

export const client = sanityClient({
  projectId: 'your-project-id', // Replace with your Sanity project ID
  dataset: 'production', // Replace with your dataset name
  apiVersion: '2023-08-20', // Use the latest API version
  useCdn: true, // `false` if you want to ensure fresh data
});

1. Fetching Data from Sanity
   In a Next.js page, you can now fetch and display data from Sanity:This code snippet will fetch all documents of the type "post" from your Sanity dataset and display their titles on the homepage.

import { client } from '../sanity/client';


export default async function Home() {
    const query = '*[_type == "post"]';
    const posts = await client.fetch(query)
    return (
            <div>
                <h1>Blog Posts </h1>
                < ul > {
                    posts.map((post) => (
                        <li key= { post._id } > { post.title }
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}

Step 4: Enhancing Your Next.js and Sanity Integration

Now that you have the basic setup, you can enhance your integration by adding features such as:

• Dynamic Routes: Set up dynamic routes in Next.js to create individual pages for each Sanity document (e.g., blog posts, product pages).
• Preview Mode: Implement Sanity’s preview mode to allow content editors to preview their changes in real-time.
• Custom Components: Use Sanity’s Portable Text to create rich text components that render complex content structures in Next.js.

Conclusion

With Next.js 14 and Sanity, you have a powerful combination to build dynamic, content-driven websites and applications. The setup process is straightforward, and with both tools’ growing ecosystems, you can quickly scale your projects to meet any requirement.