This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
The business page has an embedded Sanity Studio at /studio. Editors can open Business Page Images, see the same image slots used by the site, and replace any image there.
Add these values to .env.local:
NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"
SANITY_API_VERSION="2025-01-01"The project ID is the short ID from the Sanity dashboard, not the website name. After adding these values, restart the dev server.
In the Sanity dashboard, add your website origins under API > CORS origins:
http://localhost:3000
https://your-production-domain.comAllow credentials for these origins so Studio login works.
To make the current placeholders visible inside Sanity, create a Sanity write token and add it locally:
SANITY_API_WRITE_TOKEN="your-write-token"Then run:
npm run sanity:seed-imagesThis creates one singleton document with the fixed ID businessPage and uploads the current placeholder images into the matching fields. After that, editors only need to visit /studio, open Business Page Images, replace an image, and publish it.
The document shape is:
{
_id: "businessPage",
_type: "businessPage",
heroImage: image,
aboutImage: image,
workW1Image: image,
workW2Image: image,
// ...through workW12Image
}Any missing Sanity images fall back to the current default images.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.