How I created a Responsive Personal Portfolio Website with Next.js

Jordan Wells
5 min readMay 30, 2022
The final result,

Almost two years ago, I created my first website using HTML, CSS, and Python. Now, I’ve reinvented it using a modern and robust front-end development framework known as Next.js. For the past week, I have been developing it and now I’m proud to present

I created the first website to learn the “ins and outs” of web development fundamentals, and now I’ve created this new website to learn how front-end development is done with a slick JavaScript framework. It definitely wasn’t an easy journey, but I hope I can pass on some of the cool things that I’ve learned about along the way.

As always, if you want to see any of the code that made all this possible, it is available on my GitHub.

Why is Next.js great?

Next.js logo

Next.js is a framework built on top of React, the popular JavaScript front-end development library. The benefit? Statically generated pages are reactive, and Next.js will hydrate your application client-side to give it full interactivity.

Additionally, there are many ways to render your site. Content can be rendered by the server (Server-Side Rendering), pre-rendered whenever you build the application, or deferred until a user decides to access the page.

What does all this mean?

  1. Faster development times
  2. Improved performance
  3. Better user experience

Sounds pretty good to me! There’s a reason why it is used by Netflix, DoorDash, Twitch, Hulu, and many more. So lets get cracking on developing one of these apps.

Getting started with Next.js

Before we begin, I’d highly recommend checking out the Next.js documentation, which does an amazing job explaining all the ins and outs of the framework.

1. Creating a Next.js project with create-next-app

Thankfully, the kind people behind Next.js have made it easy to get started with a bare bones Next.js app. Similar to the ever popular create-react-app, you can get…