Skip to content
Swil
  • Writing
  • Work
  • Vibe
  • Lab/lab3D scenes, a playable piano, the solar system.
  • 3D Models/modelsModels you can turn and look around.
  • Music/musicA listening room, an aespa archive and a piano.
  • Terminal/terminalA small command line in the browser.

Things to click, turn and listen to.

  • Planner/tools/workA week of tasks with a focus timer.
  • Image editor/tools/image-editCrop, resize and adjust in the browser.
  • Typing/tools/typingA typing trainer.
  • All tools →/tools

Small tools I use myself, all in the browser.

  • Finuwell↗finuwell.comAn atlas of how the body works.(opens in a new tab)
  • Swil News↗news.supwil.comAI and tech news, updated daily.(opens in a new tab)
  • SwirlRead↗swirl-read.vercel.appA Markdown reader for a notes folder.(opens in a new tab)

Separate apps I built, each on its own site.

  • Resources/resourceTools and reading I keep going back to.
  • Perf/perfThis site's own measurements.
  • Changelog/changelogWhat changed on the site, and when.

Reading I go back to, and how this site is measured and changed.

Writing/blogWork/projectVibe/vibe

Explore

Lab/lab3D scenes, a playable piano, the solar system.3D Models/modelsModels you can turn and look around.Music/musicA listening room, an aespa archive and a piano.Terminal/terminalA small command line in the browser.

Planner/tools/workA week of tasks with a focus timer.Image editor/tools/image-editCrop, resize and adjust in the browser.Typing/tools/typingA typing trainer.All tools →/tools

Finuwell ↗(opens in a new tab)finuwell.comAn atlas of how the body works.Swil News ↗(opens in a new tab)news.supwil.comAI and tech news, updated daily.SwirlRead ↗(opens in a new tab)swirl-read.vercel.appA Markdown reader for a notes folder.

Resources/resourceTools and reading I keep going back to.Perf/perfThis site's own measurements.Changelog/changelogWhat changed on the site, and when.

Site

  • Home
  • Writing
  • Work
  • Vibe
  • RSS

Playground

  • Lab
  • 3D Models
  • Music
  • Terminal

Tools

  • Planner
  • Image editor
  • Typing
  • All tools→

Apps

  • Finuwell↗
  • Swil News↗
  • SwirlRead↗

More

  • Resources
  • Perf
  • Changelog

Elsewhere

  • GitHub
  • LinkedIn
  • Bilibili
  • Email

Huahao Shang, 2026 · Privacy

Built with Next.js · measured at /perf

Writing/Essay

A Thinking On Nextjs

A Thinking On Nextjs, personal experience, preference and thoughts

1 Sept 20254 min readUpdated16 Feb 2026Next.js · Frontend

Contents

  1. The “All-in-One” Framework (and Why I Like That)
  2. Server Components: The Real Game Changer
  3. Developer Experience That Actually Adds Up
  4. When Next.js Isn’t the Right Choice
  5. My Current Setup
  6. Final Thoughts

When I first started building web apps, I used plain React with Create React App. It worked, and for learning React it was honestly perfect. But once I tried to ship real projects, I started feeling the friction: SEO was awkward, first load could be slow, routing felt like a separate puzzle, and I was spending too much time wiring things together instead of building features.

That’s when I picked up Next.js—and it genuinely changed the way I think about building web applications.

The “All-in-One” Framework (and Why I Like That)

What pulled me in wasn’t just performance marketing. It was the philosophy: Next.js is a complete solution.

Instead of stitching together routing, SSR/SSG, bundling, and optimization from different libraries, Next gives you a coherent system out of the box. Less configuration. More building.

And yes, it’s opinionated—but I’ve come to see that as a benefit. It gently pushes you toward patterns that scale well:

  • File-based routing
    Routes are just files. No giant route config file that becomes a mess over time.

  • Automatic code splitting
    Every route loads only what it needs, which helps performance without extra work.

  • Built-in optimization
    Images, fonts, and a lot of “production polish” are handled by default rather than being a TODO forever.

The result is simple: I spend less time fighting the framework and more time shipping.

Server Components: The Real Game Changer

Since Next.js 13+ and the App Router, React Server Components have been the biggest shift for me—not because it’s trendy, but because it changes how data and UI fit together.

The “fetch data inside the component” model feels natural. You’re not automatically forced into client-side fetching with useEffect, and you don’t need to turn every page into a state machine with loading flags and edge cases just to display content.

Here’s the mental model I like:

  • Fetch on the server when possible

  • Ship less JavaScript to the client

  • Keep client components for interactivity only

A cleaner example:

code
// Runs on the server (App Router). No client-side JS needed for fetching.export default async function BlogPost({ params }: { params: { id: string } }) {
  const res = await fetch(`${process.env.API_URL}/api/posts/${params.id}`, {
    // Optional: caching strategy depending on your use case
    cache: "no-store",
  });

  if (!res.ok) throw new Error("Failed to load post");

  const post = await res.json();

  return <article>{post.content}</article>;
}

This pattern made my code feel less “front-end gymnastics” and more like: get data, render UI, done. Performance improves, but what I appreciate more is the simplicity.

Developer Experience That Actually Adds Up

Next.js has kind of spoiled me. A lot of tools claim good DX, but Next is one of the few where you feel it day-to-day:

  • Fast Refresh that usually preserves component state (so you don’t lose your flow)

  • TypeScript support without manual setup hell

  • Good error messages (you fix issues faster because you understand them faster)

  • Routing conventions that stay consistent as the project grows

Each one is small, but together they make building feel smoother—and that matters when you’re working on real apps.

When Next.js Isn’t the Right Choice

I’ve also learned not to force Next.js into every project.

Sometimes it’s just not the best tool:

  • If it’s a simple static site, Next might be more than you need.

  • If it’s a very client-heavy application (think complex canvas apps, highly interactive dashboards), the SSR side might not give you much value.

  • If you don’t need SEO, don’t need SSR, and you want minimal abstractions, plain React (or Vite) can be cleaner.

But for many real-world projects—content sites, e-commerce, SaaS dashboards, marketing + product hybrids—Next.js hits a sweet spot that’s hard to beat.

My Current Setup

For this blog, my stack is:

  • Next.js 16 (App Router)

  • TypeScript

  • Tailwind CSS

  • MongoDB

  • TipTap (rich text editor)

It’s a stack that lets me move fast while staying organized. Next’s routing and server-first approach, combined with TypeScript’s safety net, creates an environment where I can iterate quickly without breaking things every other day.

Final Thoughts

Next.js isn’t perfect—no framework is. But right now it’s the closest thing I’ve used to a framework that gets out of my way while still giving me structure, performance defaults, and a clean mental model.

A big part of that is the React ecosystem moving forward, and a big part is Vercel’s obsession with developer experience. Whatever the reason, it’s a tool that makes me enjoy building for the web more.

If you haven’t tried Next.js yet, I’d recommend starting with a small project. Explore the App Router, try Server Components in a real page, and see how the “server-first” model feels.

Filed under
  • Next.js
  • Frontend
← PreviousThoughts on AI LLM Human-like Thinking 对人工智能 大语言模型 自我思想的个人想法
Next →Diet Try Besides 16+8 Maybe 5+2
← Back to Writing