Getting Started with Next.js

I'd been building React apps for a while, but something was missing. Every project started the same way—set up routing, configure webpack, figure out how to handle server-side rendering, set up API endpoints somewhere else. It felt like I was solving the same problems over and over.

Then someone mentioned Next.js. "It handles all that stuff for you," they said. I was skeptical. Another framework to learn? But I was tired of the setup phase taking longer than the actual building.

So I started a small project. Just a personal blog, nothing fancy. I wanted to see what the hype was about.

The file-based routing was the first thing that clicked. Instead of configuring routes in a separate file, I just created files in a pages directory. Want a route at /about? Create pages/about.js. It felt obvious in a way that React Router never did. But then I hit my first confusion. What's the difference between getServerSideProps and getStaticProps? When do I use each? I spent an afternoon reading docs and experimenting. Turns out it's simpler than I thought—static for content that doesn't change often, server-side for things that need to be fresh.

I tried to build everything like a traditional React app at first. Client-side state management everywhere, useEffect hooks fetching data. It worked, but I wasn't using Next.js the way it was meant to be used. The real power came when I started thinking about when things should run. Some data can be fetched at build time. Some needs to be fresh on every request. Some can wait until the user interacts. Once I understood that, everything started making sense.

Image optimization was a pleasant surprise. I dropped in the Image component, and it just handled everything. No more manual resizing or worrying about loading performance. API routes were another win. Instead of spinning up a separate backend, I could write API endpoints right in the same project. For a small project, that's perfect. No context switching, no deployment complexity.

I'm still learning. There are features I haven't touched yet, and I'm sure I'm not using everything optimally. But the developer experience is genuinely better. Less configuration, more building. That's what I wanted. If you're on the fence like I was, just try it on a small project. You don't have to migrate everything at once. Start with something new and see how it feels.

---

Note: This is a mock-up post created as part of the Feather blog template demonstration. The content is provided as an example to showcase the blog's features including markdown rendering, search functionality, tags, and more.

Feather is a blog template built for Next.js. You can use these example posts as a reference when creating your own content.