• This repository has been archived on 22/Mar/2023
  • Stars
    star
    212
  • Rank 180,482 (Top 4 %)
  • Language
    JavaScript
  • Created over 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An example of a Sanity powered frontend using Next.js

Sanity + Next.js frontend example

DEMO πŸ‘‰ https://example-frontend-next-js.sanity-io.now.sh

This is an example Sanity powered frontend for the movie dataset using Next.js.

Prerequisites

You will need Node.js version 8.0 or greater installed on your system.

Setup

Get the code by either cloning this repository using git

git clone https://github.com/sanity-io/example-frontend-next-js.git

... or downloading source code code as a zip archive.

Once downloaded, open the terminal in the project directory, and install dependencies with:

npm install

If you're running your own Sanity project with the example movie dataset, go to lib/sanity.js and change the following lines:

  projectId: 'YOUR_PROJECT_ID',
  dataset: 'NAME_OF_YOUR_DATASET',

You can locate the ID of your project in the header of the management page for your project.

You also need to enable localhost:3000 in your CORS Origins settings! Either through the management page under settings or by running the below in the project folder you set up with sanity init:

sanity cors add http://localhost:3000

Then start the example app with:

npm run dev

The app should now be up and running at http://localhost:3000 πŸš€

More Repositories

1

sanity

Sanity Studio – Rapidly configure content workspaces powered by structured content
TypeScript
4,364
star
2

litter

Litter is a pretty printer library for Go data structures to aid in debugging and testing.
Go
1,437
star
3

next-sanity

Sanity.io toolkit for Next.js
TypeScript
667
star
4

nextjs-blog-cms-sanity-v3

A Next.js Blog with a Native Authoring Experience
TypeScript
376
star
5

GROQ

Specification for GROQ - The Query Language for JSON
JavaScript
368
star
6

hydrogen-sanity-demo

A starter for Hydrogen + Sanity projects
TypeScript
312
star
7

example-company-website-gatsby-sanity-combo

This is an example company website using Gatsby and Sanity in combination.
JavaScript
270
star
8

groq-js

JavaScript implementation of GROQ, the query language for JSON
TypeScript
250
star
9

mendoza

Differ for structured documents (JSON)
Go
234
star
10

gatsby-source-sanity

Gatsby source plugin for building websites using Sanity.io as a backend.
TypeScript
195
star
11

groq-cli

Run GROQ in your command line
JavaScript
193
star
12

template-nextjs-personal-website

A Next.js Personal Website with a Native Authoring Experience
TypeScript
165
star
13

block-content-to-react

Deprecated in favor of @portabletext/react
JavaScript
162
star
14

sanity-recipes

A collection of recipies / snippets / frequently asked questions about Sanity.io
JavaScript
159
star
15

sanity-plugin-media

Asset management plugin for Sanity
TypeScript
147
star
16

sanity-template-nextjs-landing-pages

A Sanity powered landing page builder in Next.js for https://sanity.io/create
JavaScript
142
star
17

squizzy

Quizzes with Squizzy the Squid!
JavaScript
139
star
18

sanity-shopify-studio

An example Sanity Studio configured for headless Shopify projects.
TypeScript
134
star
19

tutorial-sanity-blog-react-next

Front-end code for the Sanity, React, Next.js tutorial.
TypeScript
133
star
20

document-internationalization

Create unique translations of a document based on its language, joined by a shared reference document
TypeScript
118
star
21

sanity-template-nextjs-clean

A clean Next.js template with a native authoring experience
TypeScript
117
star
22

ui

UI building blocks for Sanity.
TypeScript
117
star
23

sanity-template-nextjs-app-router-personal-website

A Next.js Personal Website with a Native Authoring Experience. Uses app router.
113
star
24

sanity-template-kitchen-sink

A collection of demo examples
JavaScript
103
star
25

preview-kit

General purpose live previews, like next-sanity
TypeScript
100
star
26

example-ecommerce-snipcart-vue

The Transglobal Candy Store: Sample front-end for the Sanity.io e-commerce schema with vue.js, nuxt.js, and snipcart
Vue
100
star
27

sanity-template-gatsby-blog

A Sanity powered Gatsby blog for https://www.sanity.io/create
JavaScript
99
star
28

sanity-template-nextjs-blog-comments

JavaScript
83
star
29

sanity-template-nextjs-ecommerce

CSS
76
star
30

example-frontend-vue-js

An example of a Sanity powered frontend using Vue.js
Vue
72
star
31

community-studio

Sanity Community Management Studio
TypeScript
72
star
32

sanity-template-astro-clean

Clean starter template with Astro
Astro
70
star
33

sanity-template-gatsby-portfolio

A Gatsby portfolio site powered by Sanity for https://www.sanity.io/create
JavaScript
70
star
34

client

JavaScript client for retrieving, creating and patching data from Sanity.io
TypeScript
69
star
35

content-source-maps

Specification for the Content Source Maps standard
69
star
36

orderable-document-list

Drag-and-drop Document Ordering without leaving the Editing surface
TypeScript
67
star
37

plugin-kit

Enhanced Sanity.io plugin development experience.
TypeScript
64
star
38

sanity-algolia

Utilities for indexing Sanity documents in Algolia
TypeScript
61
star
39

sanity-astro

Astro
60
star
40

github-action-sanity

Dockerfile
52
star
41

sanity-plugin-graph-view

A tool for Sanity Studio to graph your content and see changes in real-time.
TypeScript
49
star
42

demo-course-platform

An example Studio and Front End demonstrating different strategies for localization with Sanity.io
TypeScript
49
star
43

next-recipe-app

CSS
47
star
44

sanity-template-nuxt-events

A Sanity powered Conference site in Vue / Nuxt for https://www.sanity.io/create
Vue
46
star
45

startup-starter-kit

The Structured Content Startup Starter Kit
JavaScript
45
star
46

netlify-form-sanity

How to use Netlify Forms and Functions to submit data to Sanity.io
HTML
45
star
47

sanity-plugin-markdown

Markdown support in the Sanity Studio
TypeScript
45
star
48

demo-custom-workflow

A demonstration of a custom content publishing workflow using Sanity.
HTML
44
star
49

sanity-template-sapper-blog

JavaScript
44
star
50

sanity-plugin-iframe-pane

Display any URL in a View Pane, along with helpful buttons to copy the URL, display a mobile size, reload the iframe or open in a new tab
TypeScript
44
star
51

image-url

Tools to generate image urls from Sanity content
TypeScript
43
star
52

sanity-plugin-mux-input

An input component that integrates Sanity Studio with MUX.com video encoding/hosting service.
TypeScript
41
star
53

sanity-template-nuxt-clean

Clean starter template with Nuxt
Vue
41
star
54

gatsby-portfolio-preview-poc

Gatsby Portfolio Preview POC
JavaScript
40
star
55

groq-store

In-memory GROQ store. Streams all available documents from Sanity into an in-memory database for local querying.
TypeScript
40
star
56

demo-marketing-site-nextjs

TypeScript
39
star
57

sanity-template-nextjs-event-starter

Fully customizable starter kit for your virtual event.
TypeScript
39
star
58

sanity-plugin-seo-pane

Run Yoast's SEO review tools using Sanity data, inside a List View Pane.
TypeScript
38
star
59

vscode-sanity

Visual Studio Code extension for developing applications powered by Sanity.io
TypeScript
38
star
60

example-app-react-native

Sanity + React Native app example
JavaScript
38
star
61

sanity-template-eleventy-blog

Minimal blog with Eleventy and Sanity
JavaScript
37
star
62

hierarchical-document-list

Plugin for editing hierarchical references in the Sanity studio.
TypeScript
37
star
63

sanity-plugin-internationalized-array

A plugin to register array fields with a custom input component to store field values in multiple languages, queryable by using the language ID as an array `_key`.
TypeScript
37
star
64

sanity-studio-secrets

Hooks and chrome for handling secrets in plugins
TypeScript
36
star
65

react-rx

React + RxJS = <3
TypeScript
36
star
66

mendoza-js

Mendoza decoder in TypeScript
TypeScript
35
star
67

themer

Experimental, creates Studio v3 themes
TypeScript
34
star
68

table

Table schema type and input component for Sanity Studio
TypeScript
34
star
69

webhook-toolkit

Toolkit for dealing with GROQ-powered webhooks delivered by Sanity.io
TypeScript
34
star
70

sanity-template-sveltekit-clean

Clean starter template with SvelteKit
CSS
32
star
71

sanity-template-svelte-kit

A minimal, fully customizable SvelteKit front-end powered by Sanity.io data.
JavaScript
32
star
72

swift-sanity

Swift
31
star
73

sanity-plugin-dashboard-widget-vercel

TypeScript
31
star
74

sanity-plugin-scheduled-publishing

Schedule documents for future publishing
TypeScript
29
star
75

hydrogen-sanity

TypeScript
29
star
76

sanity-plugin-dashboard-widget-netlify

Sanity Studio Dashboard Widget for triggering Netlify builds
TypeScript
29
star
77

sanity-template-vercel-visual-editing

TypeScript
29
star
78

cross-dataset-duplicator

Empower content editors to migrate Documents and Assets between Sanity Projects and Datasets from inside Sanity Studio.
TypeScript
29
star
79

sanity-php

PHP library for retrieving, creating and patching data from Sanity.io
PHP
28
star
80

get-it

Composable HTTP request library for node and browsers
TypeScript
26
star
81

contentful-to-sanity

Migrate from Contentful to Sanity
TypeScript
26
star
82

sanity-template-gridsome-blog

A Sanity powered Gridsome blog for sanity.io/create
JavaScript
25
star
83

visual-editing

TypeScript
25
star
84

asset-utils

Reusable utility functions for dealing with image and file assets in Sanity
TypeScript
24
star
85

sanity-template-remix-clean

Clean starter template with Remix
TypeScript
23
star
86

jsonwebtoken-esm

jsonwebtoken wrapper that provides esm support
JavaScript
22
star
87

create-react-app-blog

JavaScript
22
star
88

pkg-utils

Simple utilities for modern npm packages.
TypeScript
22
star
89

demo-media-site-nextjs

A demo template for a content-driven site with longform content and newsletter capability
TypeScript
21
star
90

sanity-mux-player

Play videos in the frontend uploaded with the MUX Sanity plugin
JavaScript
21
star
91

sanity-plugin-hotspot-array

A configurable Custom Input for Arrays that will add and update items by clicking on an Image
TypeScript
21
star
92

dashboard

Tool for rendering dashboard widgets
TypeScript
21
star
93

sanity-nextjs-vercel-example

A bare bones example of a Vercel-deployable project with a Next.js frontend and a Sanity Studio on /studio
JavaScript
21
star
94

block-content-to-html

Deprecated in favor of @portabletext/to-html
JavaScript
21
star
95

block-content-to-markdown

Transform Sanity block content to Markdown
JavaScript
20
star
96

sanity-plugin-cloudinary

Official plugin for integrating Sanity Studio with Cloudinary
TypeScript
20
star
97

demo-ecommerce

TypeScript
20
star
98

structured-content-2022

TypeScript
20
star
99

locales

A repository of user-contributed locale/language packs for Sanity Studio
TypeScript
20
star
100

gridsome-source-sanity

Sanity source plugin for Gridsome
JavaScript
19
star