A Shortcut To A Superb Portfolio Website With Next.Js
Tags: nextjs, react, beginners, tutorial
Published: 2022-07-26 12:59:00

//Note: [Get the video version of this section](https://www.youtube.com/watch?v=Och4u8N_qb0)

Dear Next.Js Aficionado,

I know you can’t wait to start coding. In the end, we’re web developers, and we love doing it.

And yet, here we are…

This tutorial is the third installment of my series for building a superb portfolio website, and I still don’t have an intention to make you open your favorite code editor.

## We’ll do that the next time…

When we’ll set up our Next.Js project for success.

But now I want to talk with you about one common big mistake. It’s so widespread that even sessional professionals fall victim to it no matter their high achievements or years of experience.

Once they go for their own website, often they create something ultra-functional and well-coded, but something with…

## ZERO marketing or design value

That happens because we like to think of ourselves as extraordinary guys who can handle every possible challenge related to web development.

But that’s far from the truth…

We’re web developers, but we aren’t DevOps engineers, web designers, UX experts, SEO specialists, etc.

So by trying to be one of these, too – web designers, for example, we’re making a big mistake that leads to a not-so-visual-appealing website. Not that the world has never seen a specialist who is both a web developer and a web designer, but most often, that’s not the case.

That’s not the case when we’re talking about me…

And if that’s not the case when we’re talking about YOU, then we must approach the design challenge more strategically…

## How To Approach The Design Challenge More Strategically

We’ll use a template!

Now, there is a fad to search for a template that matches your choice of technology. For example, “react templates,” “nextjs templates,” and so on.

You should know that a template advertised like created for Next.Js can often have a low code quality. It’s beautiful, but it’s not appropriately sliced into components and pages, so you will need to do a lot of refactoring.

It’s better to get an “HTML template” or “UI Kit”…

If you have some dollars to spend, I advise you to do it. The Internet is full of free templates, and you can definitely find something worthy (after a lot of browsing), but you’ll have a way bigger choice if you go the paid route.

## Anyway…

I will use a free HTML template.

I liked the one named “Ollie” on [page 3 of free-css.com](https://www.free-css.com/free-css-templates?start=24). It’s not quite what I need as a website structure, but I like it as a visual appeal.

So I’ll use its visual appeal and structure my new website like [sashevuchkov.com](https://sashevuhckov.com) and/or [robinwieruch.de](https://robinwieruch.de). That means I will still need to develop custom components and sections that are not part of the template, but it will be easier than creating everything from scratch.

In the following tutorial, we’ll set up a Next.JS project the proper way, and in the tutorial after it, we will start planning our components and pages.

So stay tuned.

**Let’s wrap up what we talked about:**

- One big mistake that leads to many plain ugly websites
- The right way to approach the web design challenge before us if we’re not web designers
- And how to find a good HTML template or UI kit

Cheers,
Sashe Vuchkov

PS. This tutorial was originally published [on this page](https://buhalbu.com/stream/nextjs-tutorial-the-full-stack-story-of-building-your-superb-portfolio-website)...