Blogs with NextJS?
Answered
Common paper wasp posted this in #help-forum
Common paper waspOP
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!
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!
Answered by joulev
dx is pretty good. i'm doing the first three items, the only dx pain point is css, the nextjs side of thing is pretty easy.
i dont do the remaining three items for the blog but it should be quite good also.
i dont do the remaining three items for the blog but it should be quite good also.
80 Replies
@Common paper wasp 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!
dx is pretty good. i'm doing the first three items, the only dx pain point is css, the nextjs side of thing is pretty easy.
i dont do the remaining three items for the blog but it should be quite good also.
i dont do the remaining three items for the blog but it should be quite good also.
Answer
@joulev dx is pretty good. i'm doing the first three items, the only dx pain point is css, the nextjs side of thing is pretty easy.
i dont do the remaining three items for the blog but it should be quite good also.
Common paper waspOP
CSS in what way? Thanks for responding!
@Common paper wasp CSS in what way? Thanks for responding!
Just usual CSS, making the thing look good enough. Not related to nextjs
Common paper waspOP
Sorry I mean what are you styling that's a pain? I also just woke up so not all there yet lol
as in, i struggled to write the css that made styling look decent enough for me. not really applicable/relevant to your original question
Common paper waspOP
Ah okay gatcha. Is it easy enough to implement Shiki for markdown and would the starter blog template be good enough?
To start with*
yes, shiki is pretty easy, i use this https://rehype-pretty-code.netlify.app which uses shiki behind the scenes, and it is pretty easy to get going: https://github.com/joulev/website/blob/625ef2654cfa0a1a8240c67cd4aeb74282a5a022/next.config.mjs#L12-L14
Common paper waspOP
Awesome!
Common paper waspOP
Is the blog starter good to use to get started with?
could you send me the link?
Common paper waspOP
It's one of the templates on Vercel. Getting ready for work ATM but can in a bit
If it’s an official template, should be good to start with 👍
Common paper waspOP
Hell yeah
American Crow
You mentioned some of leerob.io use cases. His blog is open source so you can just have a look if you like the dx for guestbook etc:
https://github.com/leerob/leerob.io
https://github.com/leerob/leerob.io
Common paper waspOP
Excellent! I will!
Common paper waspOP
Is it difficult to add the markdown blog post related things like MDX support, rehype, etc?
And configure it
American Crow
not really no. There are also plenty of libs if you want it supe easy or get more sophisticatd with it e.g. typesafety https://velite.js.org/ https://www.mdxts.dev/ and many others
Oh wow TIL mdxts exists, not sure why I never thought about such a thing
American Crow
joulev learnt somthing from me? must be the first and last time 😆 🎉
Common paper waspOP
Ahhhh velite is what Astro uses to define their collections
Pretty sure
What does mdxts do?
American Crow
put some effort in read the docs
Common paper waspOP
I'm driving but yeah was going to lol
Was just looking for a tldr
American Crow
tldr; don't drive and use the forum at the same time what is wrong with you 😂
Common paper waspOP
I appreciate the links. Ecosystem is so large I have no idea what can actually be used
@American Crow tldr; don't drive and use the forum at the same time what is wrong with you 😂
Common paper waspOP
Lots of things
American Crow
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
matter of fact i think there is a github comment which did something like that
here you go:
Common paper waspOP
Much appreciated! I'll read in a few! But you mean velite and mdxts do the same?
Ah yes
In the image
American Crow
they all turn md(x) into a type-safe data layer and render it
Common paper waspOP
Sick
Seems velite is the choice here
American Crow
You sure? There is more
https://www.content-collections.dev/
I am just kidding using velite myself its good
https://www.content-collections.dev/
I am just kidding using velite myself its good
Thats kinda the "pain" in nextjs you have too many choices
Common paper waspOP
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
@Common paper wasp Bc I'm what you might call an idiot
American Crow
i'd love to disagree and cheer you up. But at this point you are still driving and using the forum at the same time, so 🤷
Common paper waspOP
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
American Crow
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
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
Common paper waspOP
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
Common paper waspOP
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
American Crow
Never used content collections but from the looks of it you have to install a fresh nextjs project yourself.
Here is their example (can ofc clone that one too)
https://github.com/sdorra/content-collections/tree/main/samples/next
Here is their example (can ofc clone that one too)
https://github.com/sdorra/content-collections/tree/main/samples/next
Common paper waspOP
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
American Crow
The guy texting and driving talking about quality of life 😆 sorry this one gonna stick with you
Common paper waspOP
Lmao touchè
Common paper waspOP
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/Common paper waspOP
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@Common paper wasp 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
American Crow
it has to be the other way around
src/appCommon paper waspOP
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
American Crow
you don't have to use a src directory no
its just preference
Common paper waspOP
I'm gonna try to configure with just app. Having trouble getting content collections to work lol
American Crow
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 whereeveruse their example as guidance:
https://github.com/sdorra/content-collections/tree/main/samples/next
"characters" is their content. As you can see it's just a sibling next to
https://github.com/sdorra/content-collections/tree/main/samples/next
"characters" is their content. As you can see it's just a sibling next to
appCommon paper waspOP
Ah yes I do see that
American Crow
--
I gotta go.
You will figure it out.
Please be so kind and mark one of @joulev 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
I gotta go.
You will figure it out.
Please be so kind and mark one of @joulev 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
Common paper waspOP
Will do!
American Crow
thank you
Common paper waspOP
Hey @American Crow 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?
Common paper waspOP
Well, I got further with Velite lol. Its just rendering the html as text though so I see
<H1> and everything lolCommon paper waspOP
Oh probably because I'm not using
dangerouslySetInnerHTML. That sounds...dangerous. Is that required to render the markdown properly?