4 ms·

Building a Blog with Next.js 13 and React Server Components

32 points by MaxLeiter 3y ago

65 3y ago
My personal website/blog is a Next.js site using MDX. It's incredibly over-engineered. On one hand, it's nice to have a static site I can host for free on S3. And it's nice to have a React website where I can do front end UX things like sticky navigation on page changes. On the other hand, I really don't recommend anyone actually try to use Next.js as a day-to-day blog. Just use Wordpress or Ghost or Substack or something with a CMS. It's fine for a personal site where I post something twice a year. But for anyone who is more interested in improving their writing than their web development skills, just use a CMS or a hosted blogging platform.
- waprin 3y ago
  Yes I just migrated from Jekyll to NextJS. I agree it’s a terrible idea if you just want a blog. My motivation was to improve my web dev skills and have a low stakes playground to try stuff, since I’m using Next on most of my projects. However, it is nice that if I ever want some quirky feature on my personal site, the world is my oyster. That may have been true for Jekyll but I don’t know Ruby well.
  - nonethewiser 3y ago
    > I agree it’s a terrible idea if you just want a blog. My motivation was to improve my web dev skills and have a low stakes playground to try stuff This is the primary purpose for most people. I have no concerns whatsoever about “over engineering” personal projects.
  - hanniabu 3y ago
    Yeah I love jekyll but there's just not many plugins available while the js ecosystem has a seemingly unlimited amount. It feels like a dead end continuing working with jekyll as it feels like it's become all but abandoned.
- flashgordon 3y ago
  You know as someone who sucks at frontend I actually had the opposite experience. I went from WordPress to Hugo to nextjs (on mdx) and I couldn't be happier. My use case was to actually put in custom embeds and of different widgets/interactive tutorials etc and this was the easiest thing for me. Where I did struggle in this migration was I got sucked into contentlayer (the template I got "inspired" by used it) and it was a total time sink. Instead removed contentlayer and just loaded whay I needed and it was a lot smoother. Same with preact. Just keeping up with dependencies got easier by removing preact and contentlayer.
- Brajeshwar 3y ago
  Agree with the experimentation idea and playing with your personal website. And sticky navigation can be done with just CSS, not even getting Javascript involved at all.
- jzer0cool 3y ago
  Free or is there some charge especially on a popular post.
exabrial 3y ago
Someone explain to me why you _need_ JavaScript to build a text website?
- somehnguy 3y ago
  Of course you don’t need it, I don’t think anybody would argue you do. The article even acknowledges that in the 3rd sentence :) Personally I use Next/React along with all the fun stuff that goes with it for basic personal sites because it’s the same stack I use at my day job and I can be productive quickly. The skills are transferable, I frequently learn something while working on a personal project that I can apply to a work project, and vice versa. That part is very valuable to me.
  - benatkin 3y ago
    > The skills are transferable Are the big projects using Next because it's useful or because it's trendy? (Maybe that's the wrong word, it's "trendy" with some staying power, like Apple.) Sometimes, particularly when caught in a difficult upgrade cycle, Next is more trouble than it's worth. I'm don't know if that's the case now. It is a marketable skill, that's for sure. I just don't know if you should choose a framework just because it's popular.
    - somehnguy 3y ago
      I think popularity is a completely valid reason for choosing one framework over another. It means I’m more than likely not the first person to run into problem x or need y, and don’t need to reinvent the wheel. That means I can focus on developing useful things instead of getting tangled up in the tech. Which can be super fun of course, but most of the time I need to accomplish something other than playing with fun tech.
      - benatkin 3y ago
        Well, Bright is a good example of this, in the post. Sure, you may need RSC to use it (or at least React). But it seems like it could have be written to support multiple frameworks without losing much of anything. That may be possible in the future because it says it's "RSC-first".
henning 3y ago
Just use Hugo like everyone else and get on with your life.
- earthboundkid 3y ago
  I’ve been running a news startup with Hugo. It’s been fine. It’s not a piece of the puzzle I feel any need to replace.
- benatkin 3y ago
  Yes, you can also have a prominent light and dark mode switcher on Hugo.
  - hokumguru 3y ago
    Yeah, you can. It’s like 4 lines of JavaScript.
    - benatkin 3y ago
      And some CSS to control how it looks in both modes (the icon makes it easy to try it out). It's too bad Chrome inspector isn't convenient on mobile, it has a toggle that would make this no longer very useful for testing out your own site. On desktop it is very easy to switch with Chrome inspector - just for one site.
- lylejantzi3rd 3y ago
  Is there something less complex than Hugo out there?
  - pull_my_finger 3y ago
    Building your own SSG is a fun project if you enjoy yak shaving. Then is can be as simple or complex as you want/need it to be.
    - lylejantzi3rd 3y ago
moomoo11 3y ago
Every time I see nextjs I just ask myself why? I’m very experienced on UI and I’ve been team lead on projects shipping apps that are used by millions of users. Have experience on SPAs and server rendered. All this level of complexity just seems too much. Am I missing something? Why would I choose nextjs? Convince me since everyone seems to love this over engineered stuff.
- geodel 3y ago
  > Convince me since everyone seems to love this over engineered stuff. What's there to convince? You already know the truth.
- yieldcrv 3y ago
  I’ve felt that way many times on other frameworks and abstractions I personally find Next.js to be a simplicity (and this article to be contrived and overcomplicated) What I personally like: The React router system is greatly simplified with all scaffolding removed in favor of a Link tag more similar to html’s a tag Folder structure based API system that has no vendor locking, just standardization to what REST best practices already are, instead of relying on everyone having that discipline Ability to deviate for other network communication paradigms if its important some other things, but really it just simplifies what many of us already learned to do, and thats what most languages and frameworks do for the time period they were released in.
- NayamAmarshe 3y ago
  > Why would I choose nextjs? - Great routing system. - React. Easy to debug, fast to develop. - In-built Serverless API support. - Good third-party developer support and documentation. - Fast. Can do SSG/SSR/ISR and everything in-between. Doesn't really take much to know why Next.js is cool.
- 0xblinq 3y ago
  Because jobs and CV. That's it. Other than that, it is the best example of over engineering I've seen in my life.
pier25 3y ago
If you're a dev just make a static site. There's really no point in using something like Next for a blog. Either Astro or Eleventy are my choices these days.

32 points by MaxLeiter 3y ago

65 3y ago

My personal website/blog is a Next.js site using MDX. It's incredibly over-engineered. On one hand, it's nice to have a static site I can host for free on S3. And it's nice to have a React website where I can do front end UX things like sticky navigation on page changes. On the other hand, I really don't recommend anyone actually try to use Next.js as a day-to-day blog. Just use Wordpress or Ghost or Substack or something with a CMS. It's fine for a personal site where I post something twice a year. But for anyone who is more interested in improving their writing than their web development skills, just use a CMS or a hosted blogging platform.

waprin 3y ago
Yes I just migrated from Jekyll to NextJS. I agree it’s a terrible idea if you just want a blog. My motivation was to improve my web dev skills and have a low stakes playground to try stuff, since I’m using Next on most of my projects. However, it is nice that if I ever want some quirky feature on my personal site, the world is my oyster. That may have been true for Jekyll but I don’t know Ruby well.
- nonethewiser 3y ago
  > I agree it’s a terrible idea if you just want a blog. My motivation was to improve my web dev skills and have a low stakes playground to try stuff This is the primary purpose for most people. I have no concerns whatsoever about “over engineering” personal projects.
- hanniabu 3y ago
  Yeah I love jekyll but there's just not many plugins available while the js ecosystem has a seemingly unlimited amount. It feels like a dead end continuing working with jekyll as it feels like it's become all but abandoned.
flashgordon 3y ago
You know as someone who sucks at frontend I actually had the opposite experience. I went from WordPress to Hugo to nextjs (on mdx) and I couldn't be happier. My use case was to actually put in custom embeds and of different widgets/interactive tutorials etc and this was the easiest thing for me. Where I did struggle in this migration was I got sucked into contentlayer (the template I got "inspired" by used it) and it was a total time sink. Instead removed contentlayer and just loaded whay I needed and it was a lot smoother. Same with preact. Just keeping up with dependencies got easier by removing preact and contentlayer.
Brajeshwar 3y ago
Agree with the experimentation idea and playing with your personal website. And sticky navigation can be done with just CSS, not even getting Javascript involved at all.
jzer0cool 3y ago
Free or is there some charge especially on a popular post.

exabrial 3y ago

Someone explain to me why you _need_ JavaScript to build a text website?

somehnguy 3y ago
Of course you don’t need it, I don’t think anybody would argue you do. The article even acknowledges that in the 3rd sentence :) Personally I use Next/React along with all the fun stuff that goes with it for basic personal sites because it’s the same stack I use at my day job and I can be productive quickly. The skills are transferable, I frequently learn something while working on a personal project that I can apply to a work project, and vice versa. That part is very valuable to me.
- benatkin 3y ago
  > The skills are transferable Are the big projects using Next because it's useful or because it's trendy? (Maybe that's the wrong word, it's "trendy" with some staying power, like Apple.) Sometimes, particularly when caught in a difficult upgrade cycle, Next is more trouble than it's worth. I'm don't know if that's the case now. It is a marketable skill, that's for sure. I just don't know if you should choose a framework just because it's popular.
  - somehnguy 3y ago
    I think popularity is a completely valid reason for choosing one framework over another. It means I’m more than likely not the first person to run into problem x or need y, and don’t need to reinvent the wheel. That means I can focus on developing useful things instead of getting tangled up in the tech. Which can be super fun of course, but most of the time I need to accomplish something other than playing with fun tech.
    - benatkin 3y ago
      Well, Bright is a good example of this, in the post. Sure, you may need RSC to use it (or at least React). But it seems like it could have be written to support multiple frameworks without losing much of anything. That may be possible in the future because it says it's "RSC-first".

henning 3y ago

Just use Hugo like everyone else and get on with your life.

earthboundkid 3y ago
I’ve been running a news startup with Hugo. It’s been fine. It’s not a piece of the puzzle I feel any need to replace.
benatkin 3y ago
Yes, you can also have a prominent light and dark mode switcher on Hugo.
- hokumguru 3y ago
  Yeah, you can. It’s like 4 lines of JavaScript.
  - benatkin 3y ago
    And some CSS to control how it looks in both modes (the icon makes it easy to try it out). It's too bad Chrome inspector isn't convenient on mobile, it has a toggle that would make this no longer very useful for testing out your own site. On desktop it is very easy to switch with Chrome inspector - just for one site.
lylejantzi3rd 3y ago
Is there something less complex than Hugo out there?
- pull_my_finger 3y ago
  Building your own SSG is a fun project if you enjoy yak shaving. Then is can be as simple or complex as you want/need it to be.
  - lylejantzi3rd 3y ago

moomoo11 3y ago

Every time I see nextjs I just ask myself why? I’m very experienced on UI and I’ve been team lead on projects shipping apps that are used by millions of users. Have experience on SPAs and server rendered. All this level of complexity just seems too much. Am I missing something? Why would I choose nextjs? Convince me since everyone seems to love this over engineered stuff.

geodel 3y ago
> Convince me since everyone seems to love this over engineered stuff. What's there to convince? You already know the truth.
yieldcrv 3y ago
I’ve felt that way many times on other frameworks and abstractions I personally find Next.js to be a simplicity (and this article to be contrived and overcomplicated) What I personally like: The React router system is greatly simplified with all scaffolding removed in favor of a Link tag more similar to html’s a tag Folder structure based API system that has no vendor locking, just standardization to what REST best practices already are, instead of relying on everyone having that discipline Ability to deviate for other network communication paradigms if its important some other things, but really it just simplifies what many of us already learned to do, and thats what most languages and frameworks do for the time period they were released in.
NayamAmarshe 3y ago
> Why would I choose nextjs? - Great routing system. - React. Easy to debug, fast to develop. - In-built Serverless API support. - Good third-party developer support and documentation. - Fast. Can do SSG/SSR/ISR and everything in-between. Doesn't really take much to know why Next.js is cool.
0xblinq 3y ago
Because jobs and CV. That's it. Other than that, it is the best example of over engineering I've seen in my life.

pier25 3y ago

If you're a dev just make a static site. There's really no point in using something like Next for a blog. Either Astro or Eleventy are my choices these days.