sanity-io / tutorial-sanity-blog-react-next

Front-end code for the Sanity, React, Next.js tutorial.

Blogging with Sanity and Next.js

Read the tutorial

Get started

# Install the Sanity command line interface
~/
> npm i -g @sanity/cli

# Initiate your own project in the studio folder
~/this-blog/studio
> sanity init

# Add a CORS-origin rule to allow the frontend to request data
~/this-blog/studio
> sanity cors add http://localhost:3000 --no-credentials

# Insert the projectId and dataset name from Sanity in client.js
~/this-blog/web
> nano client.js

# Install frontend dependencies
~/this-blog/web
> npm install

# Run Next.js in development mode
~/this-blog/web
> npm run dev

Deploy on vercel

~/this-blog/web
> npm i -g vercel
> vercel login
> vercel

Deploy as a static site on Netlify

Read the tutorial

~/this-blog/web
npm run export
# exports your site as static files in /out

tutorial-sanity-blog-react-next's Issues

Export/build error

[ ] info - Generating static pages (0/7) Error occurred prerendering page "/post/[slug]". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: Cannot read properties of undefined (reading 'title')

Body text missing

Post content is missing body text. Update query to include body.

Category Pages

There are are some "right way" to create a category pages for the blog? I have try to create a [category\[slug].js in the project but I don't find a documentation or project example that show the correctly way to implement a list of posts filtered by category.

This is not a issue on the project but I thinks that will be a cool feature have an example or some documentation about how implement this type of pages.

Thanks!

2024 Update Please

Hello,

Sanity Blog Format and Sanity Studio have both gone through some major updates. Can you please update this tutorial mapping to the latest documentation and updates? I am looking for exactly this where we have the studio and the frontend blog separate.

Missing info in tutorial/section 3/routes.js

It seems in section 3 of the blogpost/tutorial the input for the routes.js should be

const routes = require('next-routes');

module.exports = routes()
  .add('Blog', '/blog')
  .add('BlogPost', '/blog/:slug', 'Blog/Post');

Static export does not export subpages

The export bundle does not include static versions of all subpages making the app slow because of all of the 404's. To reproduce run npm run build && next export and view the app in the browser. You get 404's on files like
http://127.0.0.1:8080/_next/static/1eC1~AZmgKPsc0kWUKXd8/pages/blog/a-post.js because that file does not get created in the /out/ folder.

pages/index.js is not showing posts

I did the whole tutorial, everything works well, but in index.js I cannot see the blog posts listed.

The only difference I've found with my code and this repo, is the next.config.js which is not in tutorial. When I try to use it and run the server, it crashes.