feat: upgrade sanity init for Next.js to next-sanity v9
#6644
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
No changes to documentation |
|
Component Testing Report Updated May 19, 2024 5:48 PM (UTC)
|
| @@ -39,27 +41,7 @@ const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET | |||
| export default defineCliConfig({ api: { projectId, dataset } }) | |||
| ` | |||
|
|
|||
| export const sanityStudioPagesTemplate = `import Head from 'next/head' | |||
There was a problem hiding this comment.
you are changing the name of one exported const and deleting two others. I'm assuming this is intended but just wanted to call this out to make sure.
There was a problem hiding this comment.
Yep, that's correct.
The name sanityStudioPagesTemplate allude to the format used to mount the studio in pages/studio/[[...tool]].tsx paths, which is handled by the Next.js Pages Router: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
next-sanity v9 only supports App Router routes app/studio/[[...tool]]/page.tsx mount points: https://nextjs.org/docs/app/building-your-application/routing/defining-routes
Due to the two routes starting to diverge too much in how they handle meta data tags, and other APIs, we decided to stop supporting Pages Router and started to simplify the API surface and docs.
As a result sanityStudioPagesTemplate is no longer needed and produces invalid code.
For example this export no longer exists:
import { metadata } from 'next-sanity/studio/metadata'
And since there are no longer a need to maintain two templates it no longer makes sense to specify AppTemplate in the name :)
stipsan
force-pushed
the
upgrade-next-sanity-9-init
branch
from
4afa9ed
to
64c024a
Compare
stipsan
force-pushed
the
upgrade-next-sanity-9-init
branch
from
64c024a
to
c28f7c3
Compare
stipsan
changed the title
sanity init for Next.js to next-sanity v9 best practicessanity init for Next.js to next-sanity v9
Description
This is an alternative take to #6617.
Updates the
sanity initcli when used in Next.js apps that embed Studios to the best practices innext-sanityv9:The biggest difference is that
next-sanityv9 only supports App Router, so the CLI no longer asks if you want to use App Router or not.That doesn't mean the whole app has to be in App Router, it's only relevant to the route that embeds the Studio. In fact, the entire rest of the app can be in Pages Router.
Secondly, the latest
NextStudiocomponent supports fast SSR hydration, and it works best if thesanity.config.tshas the'use client'directive at the top, instead of the[[...tool]]/page.tsxfile.What to review
sanity initinside of next v14 apps should work fine, wether or not the app is using Pages Router or App Router. If it can load the studio onhttp://localhost:3000/studiothen it works.Testing
Existing tests should cover the changes, as it's a refactor of the template itself, and removal of a prompt that's no longer needed (the prompt that asks if you want to use App Router or not).
Notes for release
The
sanity initcommand for Next.js embedded Studios are updated tonext-sanityv9 andnextv14 best practices.Closes #6617