Next.js Discord

Discord Forum

New to NextJS

Answered
Common paper wasp posted this in #help-forum
Open in Discord
Common paper waspOP
I'm just toying with an idea in my head and have recently looked at what Next has to offer and am impressed. I'm not particularly fond of React but I respect it for what it is and want to give something a try.

My question: if I have some static data that will be minimally updated and I need to present it as a list of options to pick from like links or something, is there a Next best practice on how to store and serve that data? Think really small in terms of the data btw. It's just some text and maybe some metadata for some things
Answered by B33fb0n3
I guess for this small case there is no best practice. But you can still use the basics of react for example the .map feature or array in that you store your options and so on. The metadata can easily be set by exporting it on the top:
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}
View full answer

26 Replies

@Common paper wasp I'm just toying with an idea in my head and have recently looked at what Next has to offer and am impressed. I'm not particularly fond of React but I respect it for what it is and want to give something a try. My question: if I have some static data that will be minimally updated and I need to present it as a list of options to pick from like links or something, is there a Next best practice on how to store and serve that data? Think really small in terms of the data btw. It's just some text and maybe some metadata for some things
B33fb0n3
I guess for this small case there is no best practice. But you can still use the basics of react for example the .map feature or array in that you store your options and so on. The metadata can easily be set by exporting it on the top:
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}
Answer
Common paper waspOP
To give a better idea, it's just a list of Raids from FFXIV so theyll be clickable links
At least that's the only use case for this so far xD
I appreciate the response!
B33fb0n3
yea, you can use nextjs for it, but you can also use react for that. I prefer creating every project in nextjs to have the option to add backend functionality. And if I need interactive stuff, I declare the file as use client
Common paper waspOP
Oh yeah this isn't the only functionality. There will be backend requirements:D
@Common paper wasp Oh yeah this isn't the only functionality. There will be backend requirements:D
B33fb0n3
haha see, then you should use nextjs with also the features of nextjs ^^
Common paper waspOP
Of course! So maybe I misunderstood and that would be the way you described?
B33fb0n3
yea, define your components as you would do regulary and use the nextjs functionality, whenever you need it. And if you need interactivity (for your click for example), then add a use client on top
Common paper waspOP
Neat! So just confirming if I have a list of say, raids, to iterate over and make an instance of a component I have, where would I store that list? I think in the past I've done it in json
Then looped over that making a component for each one
(like a link)
B33fb0n3
Yea, thats a possible way. You can also store it inside a database, what most people do, to also be able to change them and access them from other locations. But if your data don’t need to be changed from the client, json should be the easiest way
Turkish Van
@Common paper wasp , if You are new to Next.js, it might be useful to go through the the offical Next.js learn section.

Take a look here:
https://nextjs.org/learn
Common paper waspOP
I did yesterday! Though admittedly I was working at the same time
I usually need to go through something like a tutorial once, do it, then go back to it. I just learn slow
@Common paper wasp I usually need to go through something like a tutorial once, do it, then go back to it. I just learn slow
B33fb0n3
yea, learning slow is sometimes better than learning things wrong. So take your time and try try try stuff. That's the best way to learn more and more.
And never stop learning 🙂
Common paper waspOP
I'll go slow and start doing the design today
@Common paper wasp I'll go slow and start doing the design today
B33fb0n3
happy to hear that. Please mark solution
Common paper waspOP
I'm on mobile and I can't actually find where to mark it lol
B33fb0n3
np, someone will mark 👍
B33fb0n3
@joulev
@B33fb0n3 <@484037068239142956>
joulev
Which message
Rather, @Common paper wasp long press message -> Apps