https://github.com/marc-kruiss/next_js_13_sanity_v3_setup
A stable starter project for projects using nextjs 13 with the new sanity v3 - studio and tailwindcss
https://github.com/marc-kruiss/next_js_13_sanity_v3_setup
nextjs nextjs-starter nextjs-template nextjs13 sanity sanity-studio tailwindcss
Last synced: about 1 month ago
JSON representation
A stable starter project for projects using nextjs 13 with the new sanity v3 - studio and tailwindcss
- Host: GitHub
- URL: https://github.com/marc-kruiss/next_js_13_sanity_v3_setup
- Owner: Marc-Kruiss
- Created: 2023-01-04T16:02:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T16:19:55.000Z (over 2 years ago)
- Last Synced: 2025-03-21T21:11:28.366Z (7 months ago)
- Topics: nextjs, nextjs-starter, nextjs-template, nextjs13, sanity, sanity-studio, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 274 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js 13 + Sanity v3 + Tailwind CSS Example
This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.2)](https://tailwindcss.com/blog/tailwindcss-v3-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
A utility-first CSS framework for rapidly building custom user interfaces.
1. Visit [sanity.io/manage](https://sanity.io/manage) to copy these details from an existing project
2. Duplicate `.env.template` to `.env` and add your `projectId` and `dataset`
3. Start development again, and open the Studio at [localhost:3000/studio](http://localhost:3000/studio) to start authoring content!
## Includes
Useful Sanity examples with a light sprinkling of opinionated patterns
### Embedded Studio
Access to Sanity Studio v3 from within the Remix application itself. Now the whole Studio is a component, it lives at the `/studio` route.
### Pre-configured Studio
The Studio has been pre-configured with a basic "Record Collection" schema, as well as a basic Desk Structure to include live preview within a view pane.
### Image URL builder
## Sanity Studio
Visit `https://localhost:3000/studio` in your Remix app. You will need to:
1. Rename `.env.template` to `.env`
2. Set the correct Project ID, Dataset Name and preferred API Version from a project in your [Sanity Manage](https://sanity.io/manage)
3. Add `http://localhost:3000` to the CORS settings on that project, with Allow Credentials privileges
## Deployment
First, build your app for production:
```sh
npm run build
```
Then run the app in production mode:
```sh
npm start
```
Now you'll need to pick a host to deploy it to.
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
```bash
npx create-next-app --example with-tailwindcss with-tailwindcss-app
```
```bash
yarn create next-app --example with-tailwindcss with-tailwindcss-app
```
```bash
pnpm create next-app --example with-tailwindcss with-tailwindcss-app
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).