sanity-io/template-nextjs-personal-website

A Next.js Personal Website with a Native Authoring Experience

This starter is a personal website that uses Next.js for the frontend and Sanity to handle its content. It runs with Next.js Cache Components enabled: every page prerenders into a static shell and refreshes on content changes through Sanity Live — no rebuild required. The template comes with a native Sanity Studio that offers features like real-time collaboration and visual editing with live updates using Presentation.

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a personal website or learn these technologies.

Features

• Runs on Next.js Cache Components — pages prerender into a static shell and refresh on content changes through Sanity Live
• A performant personal website with editable projects
• A native and customizable authoring environment, accessible on yourpersonalwebsite.com/studio
• Real-time and collaborative content editing with fine-grained revision history
• Side-by-side instant content preview that works across your whole site
• Support for block content and the most advanced custom fields capability in the industry
• Sanity Live Revalidation; no need to wait for a rebuild to publish new content
• Free Sanity project with unlimited admin users, free content updates, and pay-as-you-go for API overages
• A project with starter-friendly and not too heavy-handed TypeScript and Tailwind.css

Table of Contents

• Features
• Table of Contents
• Project Overview
  • Important files and folders
  • Cache Components
• Getting Started
  • Step 1. Initialize template with Sanity CLI
  • Step 2. Run app locally in development mode
  • Step 3. Open the app and sign in to the Studio
• Adding content with Sanity
  • Step 1. Publish your first document
  • Step 2. Extending the Sanity schema
• Deploying your application and inviting editors
  • Step 1. Deploy Next.js app to Vercel
  • Step 2. Invite a collaborator
• Questions and Answers
  • It doesn't work! Where can I get help?
  • How can I remove the "Next steps" block from my personal site?
• Next steps

Project Overview

Personal Website	Studio

Important files and folders

Cache Components

The template enables Next.js Cache Components in next.config.ts:

import {sanity} from 'next-sanity/live/cache-life'

const config: NextConfig = {
  cacheComponents: true,
  cacheLife: {default: sanity},
}

Data fetching follows the three-layer (Page → Dynamic → Cached) pattern from the sanity-live-cache-components skill, applied in:

• app/(website)/layout.tsx — Dynamic/CachedNavbar and Dynamic/CachedFooter share a 'use cache' fetchSettings helper
• app/(website)/page.tsx — homepage
• app/(website)/[slug]/page.tsx — dynamic page route
• app/(website)/projects/[slug]/page.tsx — dynamic project route

Every cached leaf takes perspective and stega as plain props sourced from getDynamicFetchOptions(), so Visual Editing overlays and content-release previewing keep working in Draft Mode while the static shell is fully prerendered in production.

Getting Started

Installing the template

We will take a look at installing this template with the Sanity CLI, running locally, and lastly deploying to Vercel. If you'd rather start by deploying to Vercel, please instead reference the instructions in vercel-installation-instructions.md

1. Initialize template with Sanity CLI

Run the command in your Terminal to initialize this template on your local computer.

See the documentation if you are having issues with the CLI.

npm create sanity@latest -- --template sanity-io/template-nextjs-personal-website

2. Run app locally in development mode

Navigate to the template directory using cd <your app name>, and start the development servers by running the following command

npm run dev

3. Open the app and sign in to the Studio

Open the Next.js app running locally in your browser on http://localhost:3000.

Open the Studio by navigating to the /studio route http://localhost:3000/studio. You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.

Adding content with Sanity

1. Publish your first document

The template comes pre-defined with a schema containing Page and Project document types.

From the Studio, click "+ Create" and select the Project document type. Go ahead and create and publish the document.

Your content should now appear in your Next.js app (http://localhost:3000) as well as in the Studio on the "Presentation" Tab

2. Extending the Sanity schema

The schema for the Post document type is defined in the studio/src/schemaTypes/post.ts file. You can add more document types to the schema to suit your needs.

Deploying your application and inviting editors

1. Deploy Next.js app to Vercel

Your app is still only running on your local computer. It's time to deploy and get it into the hands of other content editors.

You have the freedom to deploy your Next.js app to your hosting provider of choice. With Vercel and GitHub being a popular choice, we'll cover the basics of that approach.

1. Create a GitHub repository from this project. Learn more.
2. Create a new Vercel project and connect it to your Github repository.
3. Configure your Environment Variables.

2. Invite a collaborator

Now that you’ve deployed your Next.js application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up Manage, select your project and click "Invite project members"

They will be able to access the deployed Studio, where you can collaborate together on creating content.

Questions and Answers

It doesn't work! Where can I get help?

In case of any issues or questions, you can post:

• GitHub Discussions for Next.js
• Sanity's GitHub Discussions
• Sanity's Community Slack

How can I remove the "Next steps" block from my personal website?

You can remove it by deleting the IntroTemplate component in /app/(website)/layout.tsx.

Next steps

• Join our Slack community to ask questions and get help
• How to edit my content structure?
• How to query content?
• What is content modelling?