Skip to content

thecodersguilduk/template-nextjs

 
 

Repository files navigation

A Next.js Personal Website with a Native Authoring Experience

This starter is a statically generated personal website that uses Next.js for the frontend and Sanity to handle its content. It 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.

Deploy with Vercel

Features

  • A performant, static 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
  • Webhook-triggered Incremental Static 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

Project Overview

Personal Website Studio
Personal Website Sanity Studio

Important files and folders

File(s) Description
sanity.config.ts Config file for Sanity Studio
sanity.cli.ts Config file for Sanity CLI
/app/studio/[[...tool]]/Studio.tsx Where Sanity Studio is mounted
/app/api/revalidate/route.ts  Serverless route for triggering ISR
/app/api/draft/route.ts Serverless route for triggering Draft mode
/sanity/schemas Where Sanity Studio gets its content types from
/sanity/plugins Where the advanced Sanity Studio customization is setup
/sanity/loader/loadQuery.ts,/sanity/loader/useQuery.ts Configuration for the Sanity Content Lake client

Configuration

Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.

Deploy with Vercel

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your personal website should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Questions and Answers

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

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

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

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

Next steps

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.7%
  • JavaScript 1.9%
  • CSS 0.4%