Giter VIP home page Giter VIP logo

nextjs-blog-cms-sanity-v3's Introduction

A Next.js Blog with a Native Authoring Experience

This starter is a statically generated blog that uses Next.js for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration and visual editing with live updates using Presentation.

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a blog or learn these technologies.

Deploy with Vercel

Note

This starter uses the Next.js Pages Router. An App Router example is also available.

Features

  • A performant, static blog with editable posts, authors, and site settings
  • A native and customizable authoring environment, accessible on yourblog.com/studio
  • Real-time and collaborative content editing with fine-grained revision history
  • Side-by-side instant content preview that works across your whole site
  • Support for block content and the most advanced custom fields capability in the industry
  • Webhook-triggered Incremental Static Revalidation; no need to wait for a rebuild to publish new content
  • Free and boosted Sanity project with unlimited admin users, free content updates, and pay-as-you-go for API overages
  • A project with starter-friendly and not too heavy-handed TypeScript and Tailwind.css

Table of Contents

Project Overview

Blog Studio
Blog Sanity Studio

Important files and folders

File(s) Description
sanity.config.ts  Config file for Sanity Studio
sanity.cli.ts  Config file for Sanity CLI
/pages/studio/[[...index]].tsx  Where Sanity Studio is mounted
/pages/api/revalidate.ts  Serverless route for triggering ISR
/pages/api/draft.ts  Serverless route for triggering Draft mode
/schemas  Where Sanity Studio gets its content types from
/plugins  Where the advanced Sanity Studio customization is setup
/lib/sanity.api.ts,/lib/sanity.image.ts Configuration for the Sanity Content Lake client
/components/PreviewProvider.tsx Configuration for the live Preview Mode

Configuration

Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.

Deploy with Vercel

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your blog should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Questions and Answers

It doesn't work! Where can I get help?

In case of any issues or questions, you can post:

How can I remove the "Next steps" block from my blog?

You can remove it by deleting the IntroTemplate component in /components/IndexPage.tsx.

How can I set up Incremental Static Revalidation?

Go to the serverless function code in /pages/api/revalidate.ts. In the code comments, you'll find instructions for how to set up ISR.

Next steps

nextjs-blog-cms-sanity-v3's People

Contributors

choutkamartin avatar chrispecoraro avatar codeshark-net avatar ecospark[bot] avatar ehowey avatar github-actions[bot] avatar huguestennier avatar jamessingleton avatar kirkwat avatar kmelve avatar korompaiistvan avatar mariuslundgard avatar ninaandal avatar rdunk avatar renovate[bot] avatar ritadias avatar snorrees avatar stipsan avatar superhelten avatar zacnomore avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nextjs-blog-cms-sanity-v3's Issues

Running into some issues when setting up new project

I followed the tutorial and I am running into some weird errors. I managed to deploy the sanity studio but on development and production it breaks with this specific error when navigating to settings

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_4__.cache) is not a function
    at eval (webpack-internal:///./schemas/settings/OpenGraphPreview.tsx:36:58)
    at ./schemas/settings/OpenGraphPreview.tsx (http://localhost:3000/_next/static/chunks/schemas_settings_OpenGraphPreview_tsx.js:102:1)
    at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1673877926238:698:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1673877926238:37:33)
    at Function.fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1673877926238:353:21)

The specific thing that is failing is the cache function that is imported from react in OpenGraphPreview.tsx. Any idea what might be going wrong?

Sitemap.xml.tsx?

Very curious to know how the Sitemap.xml.tsx is intended to be used!

Since getServerSideProps is not being invoked anywhere in the application I assume the plan is that it is invoked when the browser tries to fetch example.com/sitemap.xml although I just get 404.

I've read this but it didn't help me much: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

How is this intended to be used? Also if there are discussion forum I would be happy to contribute there instead and we can close this issue.

@stipsan @Codeshark-NET

Quirks with revalidation on new and unpublished posts

Hello, me again from #93. Thanks @stipsan for sorting that so quickly! I thought I'd make a new issue as this seems slightly different.

Unforuntately I've found a couple of other quirks with revalidation 😬

New posts:

When adding a new post, sometimes, some pages do not get revalidated. The webhook appears to send the right requests on all attempts, but some don't seem to update.

In the video below:

  • I publish 'New Post 3', the webhook sends the correct routes, but it does not update the actual site.
  • I then publish 'New Post 04', the webhook sends the correct routes again, but the site shows only the previous 'New Post 3' update (I promise I'm hitting refresh on the far right multiple times after an update, it's just out of the capture area 🙂).
  • Finally I publish 'New Post 05', the webhook sends the correct routes, all it all works as expected with all pages up to date.

A similar thing (not in the video) happens when I update an authors image. The revalidation routes sent are correct, but only some actaully update (some posts have the old author image, or even a different author if that was changed). The behaviour seems the same as the post issue, with only some pages actually get the new/updated content via on-demand ISR, despite all being requested to do so.

Sometimes however, it seems to all work. I can't quite figure out a pattern behind when it does.

Deleted/unpublished posts:

When deleting a post, everything seems to work fine, revalidation occurs and the post is removed. However if I instead unpublish it, it only requests revalidation for the homepage and the unpublished route, leaving the now unpublished post in the 'More stories' section of other posts.

Nextjs_Sanity-ISR_Issue02.mp4

Revalidate "More stories" with a webhook doesn't always work when adding/removing a post

Related Commit 9c45983 (https://nextjs-blog-cms-sanity-v3-m2zs0oidy.sanity.build).

Originally posted by @kmelve in #89 (comment)

Summary

When updating a post or author, revalidation works as expected across the homepage and existing posts. However, when adding or removing/unpublishing a post entirely, sometimes only the homepage path gets revalidated. This means the "More stories" section on other exisiting posts doesn't get updated. The deleted/unpublished post also gets left behind and is still accessible.

Sometimes it does work, I can't seem to figure out why.

Video attached shows:

  • Newly deployed site using the deploy button in this repo (as at e43759b)
  • Site with 4 posts with a new 5th post being published, validation of home + all existing posts works (as seen in the function logs on the left)
  • When deleting that 5th post, only the homepage is invalidated, leaving the "More stories" section on all other posts out of date + the removed post still available
  • Adding another new post (Test Post 06), only the homepage gets revalidated, the new post is missing from "More Stories" on all other posts
  • Unpublishing an existing post (Test Post 04) only invalidates the homepage and itself, leaving it in the "More Stories" section on most other posts

Expected behaviour:

  • Adding a new post should add it to the "More stories" section of all other posts.
    • Note that this does reliably happen for me when updating a post, making a new post and then updating it immediately after is my current workaround
  • Removing/Unpublishing a post should:
    • remove it from the "More stories" section of all other posts
    • make it inaccessible from the website as a whole.
nextjs-sanity-revalidate_issue.mp4

Error on Sanity studio

Hello, following the basic setup, after logging in into Sanity studio and going to the /studio/desk path and clicking in the "Settings" menu option I get the following error

SCR-20230117-oj8

Error: (0 , s.cache) is not a function
TypeError: (0 , s.cache) is not a function
    at 37476 (https://blog-nextjs-sanity-topaz-nine.vercel.app/_next/static/chunks/476.fb6facffda517aa9.js:1:547)
    at Function.l (https://blog-nextjs-sanity-topaz-nine.vercel.app/_next/static/chunks/webpack-a7d003a4ba84ccd7.js:1:167)

In Vercel build logs I get errors like:

warn  - Compiled with warnings
./schemas/settings/OpenGraphPreview.tsx
Attempted import error: 'cache' is not exported from 'react' (imported as 'cache').

After some testing it seems like the error is caused by the cache() function

No changes to the template were made, just cloned and launched the base version.

Tried both installing deps with yarn and npm

Website is deployed to Vercel

Unhandled Runtime Error while previewing blog post

I ran into the following error while previewing posts inside Sanity:

Unhandled Runtime Error
Error: object is not a function

Call Stack
String
<anonymous>
eval
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react/cjs/react.shared-subset.development.js (135:28)
Array.map
<anonymous>
printWarning
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react/cjs/react.shared-subset.development.js (134:43)
error
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react/cjs/react.shared-subset.development.js (118:21)
lazyInitializer
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react/cjs/react.shared-subset.development.js (1161:25)
attemptResolveElement
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1250:59)
resolveModelToJSON
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1660:53)
Object.toJSON
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1121:40)
stringify
<anonymous>
processModelChunk
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (172:36)
retryTask
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1868:50)
performWork
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1906:33)
eval
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1297:40)
scheduleWork
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (52:25)
pingTask
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1296:29)
ping
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1309:40)
runMicrotasks
<anonymous>
processTicksAndRejections
node:internal/process/task_queues (96:5)
CleanShot.2022-11-24.at.21.19.21.mp4

This issue occurs while the post is published and unpolished. SANITY_API_READ_TOKEN has been added.

Any thoughts on what I'm missing/how I could further debug this issue? 🙏

Multiple features not working

Given this is a template example, I feel it should be somewhat usable. However it seems some key features listed don't work.

Live preview - doesn't automatically refresh when changes are made in the editor
Document Actions - this doesn't work as it is in this example, it seems that can only be done via definePlugins

Feature: Dynamically generated XML sitemap (offering to help)

Hello there!

Thank you so much for this repository. 🚀

For blogs, XML sitemaps is an important feature.

Would a PR adding this be of interest? I'm happy to do the work on this one, in fact, I'm mostly done already.

It'd be a short file, including:

  • Generating a sitemap with the paths of the posts (via sanity, dynamically)
  • Ability to manually add entries to the sitemap & extend to other schemas (for other kinds of subpages)

Thanks! 🙌

Feature: Extending PortableText component to support images in PostBody (offering to help)

Hello there!

Thank you so much for this repository. 🚀

Using this in my project, the first thing I had to extend was the PostBody - in order to allow editors (in Sanity) to add images in their blog posts. It'd be awesome if this was supported right away.

Would a PR adding this be of interest? I'm happy to do the work on this one, in fact, I'm mostly done already.

It'd include:

  • Changing the post schema to allow "image" in the content array
  • Extending PostBody, to allow PortableText to use a "SanityImage" component for displaying images (via next-sanity-image)

Thanks! 🙌

Typing issues in authors.ts, postBody and postTitle.tsx files

./schemas/author.ts:8:3
Type error: Type 'ForwardRefExoticComponent<Omit<SVGProps, "ref"> & RefAttributes>' is not assignable to type 'ComponentType | ReactNode'.
Type 'ForwardRefExoticComponent<Omit<SVGProps, "ref"> & RefAttributes>' is not assignable to type 'FunctionComponent<{}>'.
Type 'React.ReactNode' is not assignable to type 'import("/home/torbjorn/Documents/Github/atopheim/mainwebsite/my-app/node_modules/@sanity/types/node_modules/@types/react/index").ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'

Steps to reproduce the behavior:

yarn build


The way I worked around it was to cast as any

import { UserIcon } from '@sanity/icons'
import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'author',
  title: 'Author',
  icon: UserIcon as any, //TODO: Why is this happening?
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      title: 'Name',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'picture',
      title: 'Picture',
      type: 'image',
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative text',
          description: 'Important for SEO and accessiblity.',
        },
      ],
      options: { hotspot: true },
      validation: (rule) => rule.required(),
    }),
  ],
})

How I solved the postHeader issue:

import React from 'react';

interface PostTitleProps {
  children: string;
}

const PostTitle: React.FC<PostTitleProps> = ({ children }) => {
  return (
    <h1 className="mb-12 text-center text-6xl font-bold leading-tight tracking-tighter md:text-left md:text-7xl md:leading-none lg:text-8xl">
      {children}
    </h1>
  );
}

export default PostTitle;

Cannot find module '@sanity/ui'

Keep getting this when I try to go to the /studio
Unhandled Runtime Error Error: Cannot find module '@sanity/ui'

The loader shows for a sec and the this happens.

The studio worked for a couple of hours and then this started to happen.

I tried installing @sanity/ui and nothing.

Does anyone have a hint on how to solve this?

Bug: on-demand revalidation showing one step old stale data

I'm using the api/revalidate to update content. But each time it updates, it returns one step old data. Not fresh.

I'm tried using bothuseCdn: true & false, but same result. Here, the webhook fires immediately after publishing, but apicdn takes upto 60 sec to update the content. Thus Next.js getting old data each time.

See below video.

Video transcription:

Starts next production builds
change “first post” to “Our first post”
Simulate “webhook” requests
Data do not change

[next attempt]
change “Our first post” to “Next first post”
Data change to Stale “Our First post” this time
but new data is “Next First Post” (edited)

CleanShot.2022-12-12.at.20.07.48-converted.mp4

Safari 12 – SyntaxError: Unexpected token '?'

I’m not sure what’s causing this but since the repo switched from app to pages directories, there have been a couple of breaking errors for Safari 12 which stop any interactive elements working e.g. onClick.

In a fresh install with no changes I get the following:

[Error] SyntaxError: Unexpected token '?'
	(anonymous function) (117-cca1b89b62e5bb2c.js:61)

Safari Version 12.0 (14606.1.36.1.9)

and in another I get:

[Error] SyntaxError: Unexpected token '.'
	eval (main.js:82)
	./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js (main.js:82)
	factory (webpack.js:713)
	__webpack_require__ (webpack.js:37)
	Eval Code (hot-dev-client.js:7)
	eval
	./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js (main.js:148)
	factory (webpack.js:713)
	__webpack_require__ (webpack.js:37)
	Eval Code (webpack-hot-middleware-client.js:7)
	eval
	./node_modules/next/dist/client/dev/webpack-hot-middleware-client.js (main.js:192)
	factory (webpack.js:713)
	__webpack_require__ (webpack.js:37)
	Eval Code (next-dev.js:5)
	eval
	./node_modules/next/dist/client/next-dev.js (main.js:236)
	factory (webpack.js:713)
	__webpack_require__ (webpack.js:37)
	__webpack_exec__ (main.js:1127)
	(anonymous function) (main.js:1128)
	webpackJsonpCallback (webpack.js:1298)
	webpackJsonpCallback
	Global Code (main.js:9)

Workspace not defined

Hello,

I used the template. Clean install. Locally everyhting works. Then deploy npx sanity deploy.

  1. Have to fix all paths the related to the deployment, sanity, to absolute paths cause of vite - done. I can deploy.
  2. Studios runs but the preview doesn't work. Workspace not found

image

The only things I changed are the

  • title of the studio
  • .env vars to SANITY_* (yet this doesn't fix the issue when I deploy the CLI reads it out but the studio complains it is undefined - therefore I just write the values plain)

What causes the Workspace not found - I can't find anything that makes sense to me cause it is the starter. Please help.

git-repo: link

`import { visionTool } from '@sanity/vision'
import { defineConfig } from 'sanity'
import { deskTool } from 'sanity/desk'
import { unsplashImageAsset } from 'sanity-plugin-asset-source-unsplash'

import { apiVersion, dataset, previewSecretId, projectId } from './lib/sanity.api'
import { previewDocumentNode } from './plugins/previewPane'
import { productionUrl } from './plugins/productionUrl'
import { settingsPlugin, settingsStructure } from './plugins/settings'
import authorType from './schemas/author'
import postType from './schemas/post'
import settingsType from './schemas/settings'

const title =
process.env.SANITY_STUDIO_TITLE || 'Blog Kerstin Eibel'

export default defineConfig({
basePath: '/studio',
projectId: "XXXX-XXXX",
dataset: "production",
title,
schema: {
types: [authorType, postType, settingsType],
},
plugins: [
deskTool({
structure: settingsStructure(settingsType),
defaultDocumentNode: previewDocumentNode({ apiVersion, previewSecretId }),
}),
settingsPlugin({ type: settingsType.name }),
productionUrl({
apiVersion,
previewSecretId,
types: [postType.name, settingsType.name],
}),
unsplashImageAsset(),
visionTool({ defaultApiVersion: apiVersion }),
],
})`

/app directory version

When will this template be migrated to use the /app directory? Happy to provide support if existing efforts are underway 🫶

@sanity/ui Module parse failed.

Steps to reproduce
1./ Follow steps 1 -> 3 as per README
3./ Visit studio `http://localhost:3000/studio
4./ Development server crashes with the following error.

error - ./node_modules/@sanity/ui/dist/index.esm.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (61:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
| function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
> import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
| import { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1 } from 'react';
| import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
```

This error occurs with Yarn, PNPM and NPM package managers.

Preview not working in production

Live preview as I type work fine on localhost, but in production I get the following error:

Uncaught (in promise) ReferenceError: equality is not defined

Error When Viewing Deployed Studio Project

Expected Behavior:

When I deploy the sanity project to the hosted Studio version, I should be able to access and use it at the set subdomain, i.e. your-project.sanity.studio.

Actual Behavior:

The Studio crashes with error:

Uncaught error: process is not defined 
ReferenceError: process is not defined

Error references file /static/sanity.3279a857.js:4558:3169

The studio does not crash locally or from blog domain /studio.

Steps To Reproduce:

  1. Follow the steps to Configure locally and deploy from the README
  2. Ensure the values for the .env are referencing your Sanity project
  3. Deploy your project to Sanity via npx @sanity/cli@dev-preview deploy
  4. Log in to your Sanity.io account, select the deployed project and set a subdomain if one isn't already set
  5. Visit the configured subdomain for the studio
  6. Observe error: Uncaught error: process is not defined

Context

This template seems to be only configured for the self-hosted Studio at http://localhost:3000/studio or your domain /studio path.

The sanity.config.ts file uses the node process object to access the env file. Since the Studio is a static client-side application, process is not available there and is therefore undefined.

Sanity's v2 - v3 migration guide gives a work around for this by setting the appropriate values in your env file that will be bundled and exposed within import.meta.env. Theses variables must start with SANITY_STUDIO_ in the name.

Possible Solution:

We can accommodate both by conditionally using process.env.NEXT_PUBLIC_SANITY_PROJECT_ID or import.meta.env.SANITY_STUDIO_PROJECT_ID depending on if process.env is defined.

This is a little tricky since we'll have to first check if window is not 'undefined' (referencing something like this), so on the client-side version we can set a process attribute that would allow us to check for it in the config file without causing errors.

Within TypeScript will have to reference some interfaces for import.meta as well, within a env.d.ts file.

I've got this working on my personal site.

Gap Appears on Right Side of Screen in Mobile View

Description:

There's an issue where a small gap, approximately 1 pixel in width, appears on the right side of the screen when viewing the website in mobile view. This gap is visible both in the developer tools and on an actual mobile device.

Screen Shot 2023-08-22 at 11 23 56 AM

Steps to Reproduce:

Open the website in a browser. You can see the issue in the preview here
Activate the developer tools (usually by pressing F12 or right-clicking and selecting "Inspect").
Toggle the device toolbar or select a mobile width from the responsive design view.
Observe the right side of the screen for the appearance of a narrow gap.
Additional Information:

The gap may not be immediately apparent but can become visible when using the element selector and hovering over any of the

elements.
This issue is not limited to developer tools; it has also been observed on an actual mobile device.
The gap can disrupt the visual appearance and alignment of the website, negatively impacting the user experience.
Expected Behavior:
The website should display without any visible gaps on the right side of the screen in mobile view, both in developer tools and on actual mobile devices.

Environment:

Browser: Chrome
Operating System: MacOS

Additional Notes:

This issue affects the overall aesthetics and usability of the website on mobile devices. Urgent attention to resolving this issue would greatly enhance the user experience across different platforms.

App directory update

Thanks for all your hard work. on this repo. :)

As per the repository README.md...

Note

This starter uses the /pages directory for Next.js routing.

The template will be migrated to the currently experimental /app directory when Vercel announce that it is production ready.

Nextjs' /app directory has been stable for quite some time now.

Will the repository contributors be updating this repo to work with the "Now" production ready /app directory?

Add the Orderable Document List plugin to this example?

Orderable Document List

Hi!

I am currently playing around with the rsc branch in the pursuit of getting Sanity Studio v3 working with the appDir for my website. I ran into some confusion around adding the Orderable Document List plugin with the current structure of adding settings.

current:
deskTool({ structure: settingsStructure(settingsType), defaultDocumentNode: previewDocumentNode({ apiVersion, previewSecretId }), }),

Orderable Document List docs:
structure: (S, context) => { return S.list() .title('Content') .items([ // Minimum required configuration orderableDocumentListDeskItem({type: 'category', S, context}),

I would imagine a lot of people are going to add this plugin, so having it added to this example or documented in this issue would be of great help.

Amazing job getting Sanity working with Next.js 13 and the appDir so fast. I know Sanity Product Day is coming fast so no rush on this. ❤️

Bug with Image Upload -- field gets unset

I was able to reproduce this with a brand new clone/deployment of this starter.

The issue is when trying to upload an image, the upload is successful, but the asset is not added to the document. Or rather, it is, but then the field is unset.

Steps to reproduce:

  1. Click "Deploy" and begin a brand new copy of this project, link to a new sanity project. Don't even worry about pulling it locally, it's reproducible in prod.
  2. Open the deployed sanity studio and go to "Authors"
  3. Try to upload an image.

Notes:

  • The image does get uploaded. You can see it if you click on "Select" and "Uploaded Images". You can even then add it from that screen and it works successfully.
  • I captured the following payload from the post request that goes to sanity after the image upload. It appears that the field is getting unset for some reason.
  • I am using Chrome browser for this, if that makes a difference.
{
    "mutations": [
        {
            "createIfNotExists": {
                "_id": "drafts.08ca9206-21a3-4bab-890e-6d4b9689efad",
                "_type": "author"
            }
        },
        {
            "patch": {
                "setIfMissing": {
                    "picture": {
                        "_type": "image"
                    }
                },
                "id": "drafts.08ca9206-21a3-4bab-890e-6d4b9689efad"
            }
        },
        {
            "patch": {
                "id": "drafts.08ca9206-21a3-4bab-890e-6d4b9689efad",
                "set": {
                    "picture.asset": {
                        "_type": "reference",
                        "_ref": "image-4f79056bcc6061b865979e057fbd0904a7cc03e1-1280x720-png"
                    }
                }
            }
        },
        {
            "patch": {
                "id": "drafts.08ca9206-21a3-4bab-890e-6d4b9689efad",
                "diffMatchPatch": {
                    "picture._upload.updatedAt": "@@ -15,10 +15,10 @@\n 11:2\n-4.396\n+5.454\n Z\n"
                }
            }
        },
        {
            "patch": {
                "unset": [
                    "picture"
                ],
                "id": "drafts.08ca9206-21a3-4bab-890e-6d4b9689efad"
            }
        },
        {
            "patch": {
                "unset": [
                    "picture"
                ],
                "id": "drafts.08ca9206-21a3-4bab-890e-6d4b9689efad"
            }
        }
    ],
    "transactionId": "56cf936b-5e83-4135-8b19-5ac86985611f"
}

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.


Using a curated preset maintained by


Sanity: The Composable Content Cloud

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

  • chore(deps): update dependency styled-components to v6.1.11
  • chore(deps): lock file maintenance
  • 🔐 Create all pending approval PRs at once 🔐

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/checkout v4
  • actions/setup-node v4
.github/workflows/lock.yml
  • dessant/lock-threads v5@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771
.github/workflows/prettier.yml
  • actions/checkout v4
  • actions/setup-node v4
  • actions/cache v4
  • actions/create-github-app-token v1
  • peter-evans/create-pull-request v6@6d6857d36972b65feb161a90e484f2984215f83e
npm
package.json
  • @sanity/client 6.18.0
  • @sanity/image-url 1.0.2
  • @sanity/preview-url-secret 1.6.12
  • @sanity/vision 3.41.1
  • @sanity/visual-editing 1.8.18
  • @sanity/webhook 4.0.4
  • @vercel/og 0.6.2
  • classnames 2.5.1
  • date-fns 3.6.0
  • intl-segmenter-polyfill 0.4.4
  • next 14.2.3
  • next-sanity 9.0.15
  • next-sanity-image 6.1.1
  • react 18.3.1
  • react-dom 18.3.1
  • sanity 3.41.1
  • sanity-plugin-asset-source-unsplash 3.0.1
  • sanity-plugin-iframe-pane 3.1.6
  • styled-components 6.1.10
  • swr 2.2.5
  • @types/react 18.3.1
  • @types/styled-components 5.1.34
  • autoprefixer 10.4.19
  • eslint 8.57.0
  • eslint-config-next 14.2.3
  • eslint-plugin-simple-import-sort 12.1.0
  • postcss 8.4.38
  • prettier 3.2.5
  • prettier-plugin-packagejson 2.5.0
  • prettier-plugin-tailwindcss 0.5.14
  • tailwindcss 3.4.3
  • typescript 5.4.5
  • node >=16

  • Check this box to trigger a request for Renovate to run again on this repository

Only when preview mode is on, the newly added slug page can be seen.

I want to ask whether this is a bug or something wrong setting.

Only when preview mode is on, the newly added slug page can be seen.
If I exit from preview mode, get 404.

  • I deployed from Vercel template, and I added CORS setting to my sanity project. (I don't change any code. )

  • video is below

Next.js.Blog.with.Sanity.io.Desk.-.13.February.2023.1.mp4

Unable to deploy the studio

Hello! first thank you for this great starter kit! I used the previous version of this template about two weeks ago when it was using the app directory of Next.js and everything was fine. I have tried multiple time to install the template following the instructions but every time I do sanity deploy I get this error:

Error: [vite]: Rollup failed to resolve import "lib/sanity.api" from "/my-website/sanity.config.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

Even though I added my environment variable to .env.local

Any idea why this is happening?

Thanks!

Document what `renovate.json` is for

Created a new project using this starter, and I find this renovate.json file in it, but I don't see any explanation of why it's here, what it's for, or how to use it.

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "github>sanity-io/renovate-presets//ecosystem/auto",
    "github>sanity-io/renovate-presets//ecosystem/studio-v3"
  ]
}

What does it do? Should it be deleted in my project? Or does it have value to me? If so, how? Do I need to set something up for it to "do anything"?

Unhandled error on preview

I've imported some other document types into this template other than author, post and settings. Everything worked fine, but after the import I get the unhandled error below when trying to preview documents of type post. The studio is working fine other than this, and I'm able to add and edit all document types.

groq-store.modern.mjs?1b67:1 Uncaught (in promise) Error: Error streaming dataset: Reached limit of 3000 documents
    at m (groq-store.modern.mjs?1b67:1:2878)
    at async EventSource.open (groq-store.modern.mjs?1b67:1:4645)

isValidSignature always fails

For some reason my revalidation endpoint always throws an invalid signature error. I have confirmed my secret in sanity webhook matches the env variable value.

The signature is within the header.
The secret exists in the env

Can you provide any suggestions?
How exactly can I debug this?

categoris

Hi @stipsan I was able to create categories in the database. But I am not able to change the GROQ query to get the list of post according to the categories so i could filter the post according to categories. Any suggestion? Has anyone implemented? Maybe a good feature to add? Thanks a lot!

Revalidate webhook config link not working

I tried using the shared config link for the revalidate webhook and ran into an internal server error until removing the dash from the webhook name. Not sure if sanity is suppose to allow dashes in webhook names, but may want to remove the dash in the config url (eg. name=On+demand+Revalidation).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.