Context best practice in NextJS
Unanswered
Cuban Crocodile posted this in #help-forum
Cuban CrocodileOP
I am currently migrating my Vite app to NextJS. I have a JSON file that stores all of the text for the website, and was using a context provider to pass this down to child components. I am wondering if this is still the correct way to approach this in NextJS, or if I should use a server component instead somehow. Thanks in advance.
37 Replies
Netherland Dwarf
How i did mine is i used yaml with next.js, i store all text content in multiple yaml files in seperate folder, and i simply import the yaml file into the page where i need the content
So i didnt use context, i just imported the yaml file directly
And it can be used in the server or client component doesn’t matter
So no need for context in my case
Can you do this with json too?
Cuban CrocodileOP
Ah I see, so for each page you had a separate YAML file and just imported it for that page?
Netherland Dwarf
Yes
But im not surr if you can do the same with json file
Can you do that like import it
Then access the propeties
Cuban CrocodileOP
Yes, you can import it, and then use dot notation to access the properties
Netherland Dwarf
Oh oky, then yeah thats what i did, this way no need for use content
Use context
Which can remove SSR
And affect seo
Cuban CrocodileOP
That would simplify it too I think
The only downside is then you have more files to maintain
Netherland Dwarf
Hmm, i wouldnt consider that downside if all content is in their appropriate files, for my case i had home.yaml about.yaml each storing their own content
It seperates logic
And easier to read and maintain
Is this what you mean?
Cuban CrocodileOP
In my case, I am storing certain variables such as my first and last name, and re using that across multiple pages. That data wouldn't change, but certain social media links might in the future
Netherland Dwarf
Oh then what i did is i made a seperate folder called enums
And made a file called socials.ts
That stores global values like phone number or email
So when ever i directly change something in that file it changes across everywhere
Is this what you mean?
You can also create a seperate json file just to store that
If dont want to use enums which is only supported in typescriot but can use objexts too
Cuban CrocodileOP
Ah makes sense. So you just keep the global data in one file and then use separate files for each page. I think would work actually
Netherland Dwarf
Yeah thats what i did
Cuban CrocodileOP
That way I wouldn't import a massive file for each page
I am a bit new to TypeScript, what is the benefit of an enum over just using JSON?
Netherland Dwarf
It depends but enums cant be modified on runtime
While objects can
Cuban CrocodileOP
Okay, this data would mostly be static anyway, shouldn't change during runtime, so that would work.
Thank you for your help 🙂