🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Handling data from Sanity in Next.js components

19 replies
Last updated: Feb 13, 2021
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
Jan 24, 2021, 10:04 PM
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.
Jan 24, 2021, 10:27 PM
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.
Jan 24, 2021, 10:31 PM
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
Jan 24, 2021, 10:34 PM
user S
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.
Jan 24, 2021, 10:35 PM
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
😅
Jan 24, 2021, 10:36 PM
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.
Jan 24, 2021, 10:37 PM
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.
Jan 24, 2021, 10:42 PM
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
Jan 26, 2021, 7:24 PM
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
Jan 26, 2021, 7:56 PM
I need to test this!
Jan 26, 2021, 8:07 PM
This looks fantastic
user X
– I’m currently using
val-loader
to accomplish this, but this looks like a great alternative
Jan 27, 2021, 11:12 AM
user G
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)
Jan 27, 2021, 3:14 PM
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
Jan 27, 2021, 3:15 PM
Def post it here (and those linked threads) too! https://github.com/vercel/next.js/discussions/14949
Jan 27, 2021, 3:21 PM
Anyone got next-plugin-preval to work? I keep getting
Error: Next Plugin Preval could not find webpack rules. This may be an unsupported version of Next.js.
following the README w/ next v10.0.6 (
user X
)
Feb 12, 2021, 11:00 PM
user M
can you file an issue if you haven’t already? (that’s not supposed to happen 😅)
Feb 12, 2021, 11:14 PM
Including your next.config.js and your package.json
Feb 12, 2021, 11:15 PM
The bug has been squashed. Thanks for reporting it!
Feb 13, 2021, 6:34 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?