How to add dynamic data to static blog? | Next.js | Page 1

misty gazelle Jul 29, 2024, 2:35 PM

#

i am creating a blog-like website where i invite other students to post their stories and advice using nextjs. i used velite (similar to contentlayer) to convert markdown to json server-side. since the posts are mostly static, pre-fetching all the posts works fine. but now i want to add more dynamic functions, such as voting, comments, user profiles, and more. how should i accomplish this? do i need to start using a database like mysql and prismadb? how would the mdx posts connect with the database in that case? currently, the data for each post is all text, as shown in the picture. how would i, for example, connect a post to a registered user account? any guidance would be greatly appreciated

shy carbonBOT Jul 29, 2024, 2:35 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

neon pike Jul 29, 2024, 2:36 PM

#

yeah @misty gazelle to keep the states of comments, liked/disliked, reactions etc, you definitely need database

misty gazelle Jul 29, 2024, 2:38 PM

#

ok

neon pike Jul 29, 2024, 2:38 PM

#

but as those blogs are mostly static, you only have dynamic part for comments, reactions ...

misty gazelle Jul 29, 2024, 2:39 PM

#

in the past, ive followed some build-along tutorials making reddit and twitter clones. i dont remember exactly how they converted user input into text, but i think it was using some external library to simplify everything

#

the post data is then added to an entry in db

neon pike Jul 29, 2024, 2:39 PM

#

user input into text means?

misty gazelle Jul 29, 2024, 2:39 PM

#

yea

misty gazelle Jul 29, 2024, 2:39 PM

#

misty gazelle the post data is then added to an entry in db

do i do the same with the mdx -> json data?

neon pike Jul 29, 2024, 2:39 PM

#

oh, I see you mean the markdown?

misty gazelle Jul 29, 2024, 2:39 PM

#

yea

neon pike Jul 29, 2024, 2:40 PM

#

yeah, there is a bunch of library supporting that feature

misty gazelle Jul 29, 2024, 2:40 PM

#

i've been able to convert it to json and render it okay

#

im just not sure how to connect it to dynamic data like user profiles and voting and comments

#

hmmm

neon pike Jul 29, 2024, 2:44 PM

#

where do you store your blog data?

misty gazelle Jul 29, 2024, 2:57 PM

#

neon pike where do you store your blog data?

im using velite https://velite.js.org/guide/introduction

Velite

Introduction | Velite

Velite is a tool for building type-safe data layer, turn Markdown/MDX, YAML, JSON, or other files into app's data layer with Zod schema.

#

i have a bunch of mdx files in src/content/posts

#

and velite builds them into json

#

then i can just import and use it directly

neon pike Jul 29, 2024, 3:00 PM

#

I see, so it's not a cloud store then

misty gazelle Jul 29, 2024, 3:02 PM

#

yea not at all

neon pike Jul 29, 2024, 3:02 PM

#

do they provide a way to update the content?

misty gazelle Jul 29, 2024, 3:02 PM

#

im not sure if this is usable for very large amounts of data but it hsould be fine

misty gazelle Jul 29, 2024, 3:03 PM

#

neon pike do they provide a way to update the content?

i haven't tried

#

i'm not clear on the technical terms and how it works, but from waht i've seen it's just a preprocessor?

neon pike Jul 29, 2024, 3:03 PM

#

probably not I guess

misty gazelle Jul 29, 2024, 3:03 PM

#

yea, so i probably cant store vote data in the mdx

neon pike Jul 29, 2024, 3:04 PM

#

yeah, then you definitely need a database but how are you gonna identify each blog in your database?

#

maybe you have slug - oh you have it

misty gazelle Jul 29, 2024, 3:05 PM

#

idk how i would connect each blog to the database

#

bc right now, i direcly access the posts data and redner it

neon pike Jul 29, 2024, 3:05 PM

#

yeah, it's okay

misty gazelle Jul 29, 2024, 3:05 PM

#

do i need to add an intermediate step where i store the json into db?

#

but then i'd have to re-fetch it, right?

#

hmm

neon pike Jul 29, 2024, 3:06 PM

#

you can keep your blog with velite or something

#

and then just store reaction/comments any dynamic parts in your database

#

but again, please check if they provide a way to update the content

#

being not able to update his own content doesn't make sense

misty gazelle Jul 29, 2024, 3:06 PM

#

i can update it manually

#

i think it's meant for static pages

neon pike Jul 29, 2024, 3:07 PM

#

oh, is it your own blog site?

#

okay then, just make sure that you have something unique for each blog - in your case slug will be okay

#

make some tables in your database for comments and reactions

misty gazelle Jul 29, 2024, 3:08 PM

#

neon pike oh, is it your own blog site?

for now, i haven't provided ways for users to directly post things, though that might be needed in the future

neon pike Jul 29, 2024, 3:08 PM

#

but comments can't be markdown like your own blog

misty gazelle Jul 29, 2024, 3:08 PM

#

yea

neon pike Jul 29, 2024, 3:09 PM

#

misty gazelle for now, i haven't provided ways for users to directly post things, though that ...

then you should probably check the possibility - it's better than redoing everything what you have done

misty gazelle Jul 29, 2024, 3:09 PM

#

ok

#

i was wondering before i started how news sites like new yorker build their sites

neon pike Jul 29, 2024, 3:10 PM

#

why don't you use cms?

misty gazelle Jul 29, 2024, 3:10 PM

#

what's that

#

i googled it but hard for me to understand

neon pike Jul 29, 2024, 3:10 PM

#

https://strapi.io/
https://www.sanity.io/

Strapi - Open source Node.js Headless CMS 🚀

Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.

Sanity.io

Sanity: The Composable Content Cloud

Sanity is the modern CMS that transforms content into a competitive advantage. Customize, collaborate, and scale your digital experiences seamlessly.

#

check out these links

#

they are Content Managemnet System

misty gazelle Jul 29, 2024, 3:11 PM

#

ohh cool so that's how people create posts

neon pike Jul 29, 2024, 3:11 PM

#

exactly

misty gazelle Jul 29, 2024, 3:12 PM

#

does it give users some way to make it too?

neon pike Jul 29, 2024, 3:13 PM

#

nope, you probably need to integrate it.

#

they provide a dashboard UI but it's for ADMIN

misty gazelle Jul 29, 2024, 4:22 PM

#

ok i did some research and thinking

#

i'm thinking of doing it like this:

#

i will use prismadb and mysql or smth for all the data, including users, posts, votes, comments, etc.

#

for now, i'll write the mdx files locally and have a script to convert those to json and populate the db

#

the comments will just be plain text for now (no need for markdown)

#

in the future, i might add markdown input for end-users

neon pike Jul 29, 2024, 4:24 PM

#

yeah, it makes sense

misty gazelle Jul 29, 2024, 4:24 PM

#

ok that's good

neon pike Jul 29, 2024, 4:24 PM

#

just have unique slug for each blog

misty gazelle Jul 29, 2024, 4:24 PM

#

ok

neon pike Jul 29, 2024, 4:24 PM

#

and then you need that in your tables for reactions, user replies

misty gazelle Jul 29, 2024, 4:24 PM

#

ok i'll start writing and see if everything works

#How to add dynamic data to static blog?