Why I Chose Next.js for My Portfolio

Building a portfolio site might sound simple, but choosing the right framework can make or break the developer experience. After experimenting with several options, I landed on Next.js — and here's why.

The SSR Advantage

Server-Side Rendering isn't just a buzzword. For a portfolio site, it means:

• Faster initial page loads — content is ready before JavaScript even runs
• Better SEO — search engines can crawl fully rendered HTML
• Improved social sharing — Open Graph tags work out of the box

"The best framework is the one that gets out of your way while giving you superpowers."

Tech Stack Breakdown

Here's what powers this site under the hood:

Code Example

Setting up a tRPC router for blog posts is surprisingly clean:

export const blogRouter = createTRPCRouter({
  getAll: publicProcedure
    .input(z.object({ q: z.string().optional() }).optional())
    .query(async ({ ctx, input }) => {
      return await ctx.db.blogPost.findMany({
        where: { published: true },
        orderBy: { publishDate: "desc" },
      });
    }),
});

Key Takeaways

1. Start with SSR if SEO matters to you
2. Use TypeScript end-to-end — tRPC makes this effortless
3. Don't over-engineer early — ship first, optimize later
4. Pick a design system you enjoy — Catppuccin keeps things consistent

What's Next?

I'm planning to add more interactive elements like:

• A project timeline with animations
• Live code playgrounds for demos
• Dark/light theme toggle (coming soon)

Thanks for reading! Feel free to check out the source code and drop a star if you found it useful.