Handling data from Sanity in Next.js components

I'm curious how people here handle populating components at the

_app.js

level with data from Sanity? For example, I have a

Header.js

component that should persist across pages, but I'd also like this Header to use data from Sanity, ideally fetching at build time. But what's the best way to get this data to the Header? Any thoughts would be greatly appreciated

I’ve added a script that runs before next build which fetches the data and saves it as a JSON file in the public folder. Then I just read the data from the JSON file.

The downside is that you lose preview that way, but unless you fetch it on every page I don’t see a solution to that.

I wanted to keep preview so i made next-data-hooks but unfortunately it does re-fetch on every page. This is how my layout component looks

I was actually thinking about creating a next.js plugin/webpack-loader that would pre-evaluate an async function during the build and serve it as a json file.

Yeah I think you have to make that compromise if you want to keep preview. Your data hooks are a pretty neat solution to it to avoid repeating yourself on every page.
The JSON file works pretty well, but every now and then I forget that it doesn’t update automatically, even in dev mode, and wonder what I’m doing wrong. Then I remember that I have to restart the dev server
😅

My initial solution was to use the webpack step in the build, but it didn’t work in Vercel for some reason so I had to run the script before the build altogether.

Another gotcha with the webpack step as defined in next.config.js was that TS isn’t supported. So I had to write a JS script for that while everything else is TS.

I just created this next.js package to solve this kind of problem. I would love feedback if any of y’all would like to try it: https://github.com/ricokahler/next-plugin-preval

Thanks both for the info. Funnily enough Rico, I follow you on Github and saw this earlier today. Looking forward to trying both of these methods out at some point this week

I need to test this!

This looks fantastic – I’m currently using

val-loader

to accomplish this, but this looks like a great alternative

yeah i saw that prior to making this plugin but i couldn’t use typescript with it easily and it didn’t have enough integration into the next world so i decided to go more specific.
a lot of the time spent getting this working was actually the babel config and tsconfig paths integration (since next.js supports them)

If any of y’all try it or have any suggestions, feel free to send any feedback my way. I’m looking to promote this on reddit, hacker news, etc around friday-ish

Def post it here (and those linked threads) too! https://github.com/vercel/next.js/discussions/14949

Anyone got next-plugin-preval to work? I keep getting following the README w/ next v10.0.6 ()

can you file an issue if you haven’t already? (that’s not supposed to happen 😅)

Including your next.config.js and your package.json

The bug has been squashed. Thanks for reporting it!