Al Blog

Creating a Blog with Sanity Studio and Next.js: A Step-by-Step Guide

Al Siam
Al Siam

August 26, 2023

// app/page.tsx
import ImageUploader from "@/components/ImageUploader";

export default function Home() {
  return (
    <main className="p-10">
      <ImageUploader />
    </main>
  );
}

0. Create a project folder and a monorepo

In this project, you will have two separate web apps:

  1. Sanity Studio – a React app that connects to the hosted API with all your blog content
  2. The blog frontend - a website built with Next.js

It can be useful to keep these codebases in the same folder and git repository (but you don't have to), so you'd have a studio folder and a frontend folder.

You can also place .gitignore, .editorconfig, or other config files in the root, as well as a README.md. If you want to track the project with git, run the command git init in the root folder in your terminal (or add the folder to your Git GUI tool of choice).

1. Install Sanity and the preconfigured blog schemas

We'll start by setting up the Sanity Studio using node package manager (how to install npm). To set up, run:

npm create sanity@latest

You'll be asked to create an account with your Google or Github login, or you can choose to log in with a dedicated email and password. Afterward, you can create a new project, where you'll be asked to choose a project template. Select the blog schema template. First, though, you'll need to give your project and dataset a name (you can add more datasets if you need one for testing) and choose the path to your studio folder. You can also choose if you want to use TypeScript and which package manager to use.

$ Select project to use: Create new project
$ Your project name: sanity-tutorial-blog
$ Use the default dataset configuration? Yes
$ Project output path: ~/Sites/my-blog/studio
$ Select project template: Blog (schema)
$ Do you want to use TypeScript? Yes
$ Package manager to use for installing dependencies? npm

When the installation is done, you run npm run dev inside the studio folder. This launches the Studio on a local development server so you can open it in your browser and start editing your content. This content will be instantly synced to the Content Lake and is available through the public APIs once you hit publish.

By running you'll upload the studio and make it available on the web for those with access (you can add users by navigating to sanity.io/manage.).

Gotcha

You can go ahead and make your dataset private, but if you do, you will need to mint a token on sanity.io/manage and add it to the client configuration below.

There's a lot you can do with the schemas now stored in your studio folder (in the schemas folder), but that's for another tutorial. For now, we just want our blog up and running!

2. Install Next.js and get it running

Now, let's install Next.js. It has a neat setup for making a website with React and can statically generate and revalidate content, as well as lots of other useful features. If you are used to React or have tried out create-react-app, it shouldn't be too hard to get started. There is an excellent tutorial that goes a bit deeper on nextjs.org, but you should be able to tag along with this for now.

In your main project folder, run:

npx create-next-app@latest

We‘ll choose ‘front-end’ as our project name; this will install Next.js in a folder with that name. Otherwise, we'll use the default options:

$ What is your project named? … frontend
$ Would you like to use TypeScript with this project? … Yes
$ Would you like to use ESLint with this project? … Yes
$ Would you like to use `src/` directory with this project? … No
$ Would you like to use experimental `app/` directory with this project? … No
$ What import alias would you like configured? … @/*

Now your folder structure should look like this:

~/Sites/my-blog
├── studio
├── frontend

In the frontend folder, the package.json should look similar to this:

{
"name": "frontend",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.1.6",
"@types/node": "18.11.18",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.10",
"eslint": "8.33.0",
"eslint-config-next": "13.1.6",
"next": "13.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.5"
}
}

Next.js handles routing out of the box based on where you structure files on your filesystem. If you add a folder called pages and add to it index.tsx it will become the front page of your site. Likewise, if you add about.tsx in /pages, this will show up on localhost:3000/about once you spin up the project locally (we're not using the app directory convention as it handles more advanced needs than required here).

The create-next-app will have added a file named index.tsx. Open this file and replace what's there with this simpler “Hello world”:

// index.tsx

const Index = () => {
return (
<div> <p>Hello world!</p> </div>
)
}

export default Index;

As we won't use it, also remove the existing CSS: delete the styles folder and any references to it, including in _app.tsx. Alternatively you can just delete the styles inside of the file and replace them with your own CSS once you're done with this tutorial.

Now run npm run dev. You should have a greeting to the world if you head to localhost:3000 in your browser.

Protip

Contrary to other frameworks, such as create-react-app, you don't have to include import React from 'react' in a Next.js project.

Categories