I have to admit it. If not to you, then at least to myself. I haven't been developing my site for a long time. I've been working with Next.js on hobby projects for quite a while, and after the release of Next.js 13, I was convinced that my site needed to go back to its glory days.

If you haven't heard about Next.js yet: Next.js is a flexible React framework that gives you building blocks to create fast web applications.

Tailwind, on the other hand, is a framework I'm not that familiar with. I've been working with a lot of other frameworks like Chakra UI, Bootstrap, Material UI, Bulma and also different libraries like CSS modules, styled components, sass, etc.

My goto CSS framework has been Chakra UI and still is, but this time around I just want the utilities, not the premade components. Further than that, I want to optimize my components to only ship the most critical CSS to the client for maximizing performance. Tailwind is the tool for the job!

Premature optimization is the root of all evil in software development a wise man told me. But what this wise man doesn't know is, that the dopamine kick I get from fantasizing about my overengineered personal website, which only a handful of people will probably visit, has more value than the wasted hours of development. I guess when you only do it as a hobby project, for your brand and most of all, for having fun, I guess the tradeoff will do.

Starting with T3-stack - Fullstack typesafe

The best way to start a full-stack, typesafe Next.js app is the heading on T3 website and by far the best developer experience I've had with Next.js and typescript.

npm create t3-app@latest

That is the only command you need. Follow the steps in the terminal and choose the packages you want for your project, and then you are ready to go!

      <section>
        <div className="mx-auto max-w-4xl px-4 sm:px-6">
          <div className="pt-32 pb-12 md:pt-40 md:pb-20">
            <div className="flex w-full flex-col items-center justify-center px-4">
              <Image
                width="220"
                height="220"
                className="mb-4 h-64 w-64 rounded-full bg-slate-200 p-1 dark:bg-white"
                alt="avatar"
                src="/profile-picture.jpg"
              />
              <h1
                className="leading-tighter mb-4 text-5xl font-extrabold tracking-tighter text-black dark:text-white md:text-5xl"
                data-aos="zoom-y-out"
              >
                Kasper Due
              </h1>
              <h2 className="text-center text-sm font-bold text-black dark:text-white md:text-base">
                👩‍💻 Senior Software Engineer and Aspiring Runner 🏃
              </h2>
              <div className="mx-auto max-w-3xl">
                <p
                  className="mb-8 mt-3 text-center text-base text-gray-600  dark:text-white"
                  data-aos="zoom-y-out"
                  data-aos-delay="150"
                >
                  I build tools and apps that makes life easier for people. I am
                  currently part of{" "}
                  <a href="https://www.bankingcircle.com">Banking Circle</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

So far so good. We are starting with a simple version just showing my personal image, title etc. MVP is to show my personal info on homepage and then deploy it to kasperdue.com on Vercel

Deploying my website to Vercel

So far so good. We have created to minimal version of the website and are ready to deploy to Vercel. Vercel is the company behind Next.js and is my preferred way for to deploy a next.js website. They've made it so easy to deploy a new website by just connecting a github repository and then on every commit pushed will automatic deployments occur.

Poining my domain "kasperdue.com" to my Vercel app.

Vercel has assigned a random subdomain to my app out of the box. My personal website is personal-website-6u3e4y6cn-kasperduen.vercel.app which is a mix between my github repository, my github account and a random ID.

My domain name is hosted on Cloudflare, and i just have to specify a new A record pointing toward root of Vercel on the IP address the Vercel has specified.

Furthermore i have to create a CNAME record for my subdomains so that "www" will work when navigating to my site. In my case with cloudflare "www" will point towards cname.vercel-dns.com. I've configured my app to redirect kasperdue.com to kasperdue.com.

kasperdue.com is live! 🎉

After the lighthouse test, we can see the 4 KPI's is at 100 meaning max score which is really great! Definitely something to thank the team behind Next.js for optimizing the framework to perform best way possible.

This is part 1 of a series where i will continue working on my personal website and add features while at the same time documenting my journey.

Thanks for reading, and have a great day!