Prerequisites

It is assumed that you already understand the fundamental aspects of launching a sample related to Sanity. This site provides a brief introduction in the following guide.

Sanity Quick Start Guide

I have prepared this guide to help you understand the whole process of using Sanity, our Headless CMS product.

Furthermore, we shall proceed with the introduction based on a project that migrated content from WordPress.

Migration from WordPress to Sanity

In this series of articles, we will take you through the steps to migrate your Wordpress-managed content to Sanity.

Creating a new repository

This time, for the blog site, we shall proceed by directly inheriting the code from the WordPress project. To manage both the Sanity Studio code and the Next.js code within the same repository, we shall adopt the following structure:

The apps/studio folder utilises code from the following repository.

• https://github.com/haramizu/sanity-wordpress

The necessary files are already prepared in the studio folder.

Creating a Next.js project

Next, create a Next.js project. Execute the following command in the command line:

The project name and confirmation to use the recommended settings will be displayed. This time, I selected as follows.

After a short while, the folder will be created.

Navigate to the project directory and run `npm run dev` to verify that the Next.js project launches.

Everything is now ready.

Display the content

Addition of packages

We shall proceed to add a package for fetching content from Sanity via Next.js. Execute the following command within the Next.js folder.

Adding Sanity Client files

Add the Sanity Client file to access the content. The sample code is as follows. Replace YOUR-PROJECT-ID with your Sanity project ID.

Page update

The file on the actual Next.js homepage is rewritten as follows. Note that this differs from the code published on the Sanity site, as the publication date parameter has been changed to `date`.

Once the changes have been reflected, please start the Next.js site. We can now confirm that the content has been successfully fetched.

Environment variable

At this stage, the project ID and other details are hard-coded within the Sanity Client. Therefore, we will proceed with the following changes.

Alongside the above code, I have created a .env.sample file.

I have created and am using a .env.local file, referencing the above file, to manage environment variables in conjunction with Vercel.

Summary

In the apps/nextjs/app/page.tsx file, which serves as the top-level page in Next.js, we confirmed that content is retrieved using the query language GROQ, and the page is built using the results. Having successfully retrieved the data, we will now proceed to build the blog based on this foundation.

The code up to this point is published on the following branch.

• https://github.com/haramizu/sanity.blog/tree/nextjs-step-1