#Blogs with NextJS?

82 messages · Page 1 of 1 (latest)

neon patrol
#

I've been thinking of moving my blog to Next JS from Astro. I know Astro is better suited for static sites but I've also read through the Next docs and know that it can also do Static sites.

I'm more wondering about how user friendly the DX is to create a blog with Next? I have really not many requirements.

  • Shiki or Prisma Syntax highlighting
  • MDX compatible
  • Those nice little terminal windows you see everywhere for code blocks lol
  • A database to read and store user comments in a guestbook similar to https://leerob.io/guestbook (and ORM like Drizzle or Prism)
  • Along with the guestbook, OAuth with GitHub (literally just like above)
  • Some SSR routes to handle things like a contact form and the guestbook

I can probably truck along and figure out the differences in structure and philosophy between the two frameworks but just curious about the above! Thanks!

Lee Robinson
Lee Robinson

Developer, writer, and creator.

lost cometBOT
#
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)

wanton cloud
neon patrol
wanton cloud
neon patrol
#

Sorry I mean what are you styling that's a pain? I also just woke up so not all there yet lol

wanton cloud
#

as in, i struggled to write the css that made styling look decent enough for me. not really applicable/relevant to your original question

neon patrol
#

Ah okay gatcha. Is it easy enough to implement Shiki for markdown and would the starter blog template be good enough?

#

To start with*

wanton cloud
neon patrol
#

Awesome!

neon patrol
#

Is the blog starter good to use to get started with?

wanton cloud
#

could you send me the link?

neon patrol
#

It's one of the templates on Vercel. Getting ready for work ATM but can in a bit

wanton cloud
#

If it’s an official template, should be good to start with 👍

neon patrol
#

Hell yeah

honest dagger
neon patrol
#

Excellent! I will!

#

Is it difficult to add the markdown blog post related things like MDX support, rehype, etc?

#

And configure it

honest dagger
wanton cloud
#

Oh wow TIL mdxts exists, not sure why I never thought about such a thing

honest dagger
#

joulev learnt somthing from me? must be the first and last time 😆 🎉

neon patrol
#

Ahhhh velite is what Astro uses to define their collections

#

Pretty sure

#

What does mdxts do?

honest dagger
#

put some effort in read the docs

neon patrol
#

I'm driving but yeah was going to lol

#

Was just looking for a tldr

honest dagger
#

tldr; don't drive and use the forum at the same time what is wrong with you 😂

neon patrol
#

I appreciate the links. Ecosystem is so large I have no idea what can actually be used

neon patrol
honest dagger
#

they fundamentally do all the same thing. they are all mdx libs at the end of the day. the have different approaches and use cases but i am not going to draw a comparison table.

matter of fact i think there is a github comment which did something like that

#

here you go:

image.png
neon patrol
#

Much appreciated! I'll read in a few! But you mean velite and mdxts do the same?

#

Ah yes

#

In the image

honest dagger
#

they all turn md(x) into a type-safe data layer and render it

neon patrol
#

Sick

#

Seems velite is the choice here

honest dagger
#

Thats kinda the "pain" in nextjs you have too many choices

neon patrol
#

Lol! I think Astro uses Content Collections too?

#

Oh and there's a NextJS guide for it?! Amazing. Love when devs add the extra effort for framework guides

#

Bc I'm what you might call an idiot

honest dagger
neon patrol
#

So if I'm doing this much customization should I just start a blank NextJS project and add up or can I use the blog template and go from there? Idk what would be recommended given the direction I want to go in

#

Nah I'm at the office now haha

honest dagger
#

i'd go with a starter template from the mdx lib you chose. Play around with it / understand the mdx part of it.

After that you can decide if you try to integrate what you've learnt from that into a blog template or just continue with it

Thats how i'd do it

neon patrol
#

Ahhhhh okay that's a good call

#

Either velite or content collections I think

#

Content Collections doesn't seem like an MDX lib? Or am I missing something on their site

#

Ah NVM I see the content docs

#

Okay dumb question but for Content Collections does the install command install the next project too or should I run the next project install first then content collections lol

#

Nevermind that is a dumb question

#

It doesn't look like it does

#

Just installs what it needs

#

I'll play around in a bit here at work xD

honest dagger
neon patrol
#

Yeah figured. Looking at the docs now and going through. I believe Astro uses this and not Velite. The config is very similar though lol. Almost identical structure wise to define the config

#

Exciting. Been reading and learning more about Next over the last few days and there's some really neat features and QOL that is really cool

honest dagger
#

The guy texting and driving talking about quality of life 😆 sorry this one gonna stick with you

neon patrol
#

Lmao touchè

neon patrol
#

If I didn't select to use a src directory on Next install but realize after I want to use it for my content collections and blog pages, I can just make the directory right? No additional config needed?

#

Or would a src directory for Content Collections be different than a src directory for Next?

#

So you'd have src/ and app/

#

Hm. I moved src into app per the NextJS docs and changed my content collections directory to be app/src/posts but it can't find my /posts/hello-world page

honest dagger
neon patrol
#

Ahhhh. Do I need to do that or can I just put the content collections inside a directory in app?

#

That seems probably better lol

honest dagger
#

you don't have to use a src directory no

#

its just preference

neon patrol
#

I'm gonna try to configure with just app. Having trouble getting content collections to work lol

honest dagger
#

don't know about content collections but in velite for example your content does not even have to be inside the app directory it can just live in root or whereever

neon patrol
#

Ah yes I do see that

honest dagger
#

--
I gotta go.
You will figure it out.

Please be so kind and mark one of @wanton cloud replies as a solution to your original question so others can profit ( right click on a reply -> app -> mark as solution)
You kinda have to open a new thread for new questions can't keep this going forever that's the rules.
Thank you

neon patrol
#

Will do!

honest dagger
#

thank you

lost cometBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1248413522447171584 message)

neon patrol
#

Hey @honest dagger not to bring this back up but been struggling with content collections today and you mentioned velite. It seems really new and you're using it. Just curious about your experience and the config for it. Is the Quick Start in the docs enough?

neon patrol
#

Well, I got further with Velite lol. Its just rendering the html as text though so I see <H1> and everything lol