This starter uses Next.js with TypeScript and includes ESLint and TypeScript ESLint with their recommended configurations. Additionally, it includes a basic implementation of Sanity Studio v3.
Clone the project:
git clone https://github.com/keplux/typescript-next-sanity-v3.gitNext, you need to create a Sanity project if you don't already have one.
If you already have a Sanity project, copy your projectId and dataset name into the properties provided in both sanity.cli.ts and sanity.config.ts.
If you don't have a project, you can create one in your terminal. Use the following command to create your project:
npx create sanity@dev-previewYou can then delete the new project it created.
Go to your Sanity account to get your projectId and dataset and copy them into the properties provided in both sanity.cli.ts and sanity.config.ts.
Note: If you don't do this, you won't be able to access your studio.
-
In your Sanity account, click the
APItab. UnderCORS origins, delete the hosthttp://localhost:3333. -
Click
Add CORS originand enter the URL to your Next.js server. Unless you've changed something, it will behttp://localhost:3000. -
Click
Save.
If you deploy your project, make sure to add the deployment URL to CORS origins here as well.
You can now run your project:
npm run devBy default, this template hosts the Studio at the /studio route. You can view your Studio at http://localhost:3000/studio.
This is a basic dynamic routing change with Next.js. If you don't know about dynamic routing, click here to learn more.
The Studio can be found in /pages/studio/[[...index]].tsx.
If you'd like to learn more about the tools and technologies used in this template, check out the following links:
In a future update, I'll add a link to a blog post for a deep dive into how I built this template.
Feel free to open up an issue if something's not working right.