Building Portfolio: Install Next.js and Tailwind with pnpm

Building Portfolio: Install Next.js and Tailwind with pnpm

Β·

2 min read

Play this article

Hello Friends πŸ‘‹,

As I learn and build my portfolio website with Next.js and Tailwind in public, I will write the process and progress.

This time, I will write them down in a different format than my other blog posts. This series will be personal notes of what I did and the blockers, if any, instead of thorough explanations of the steps and concepts. I will also share the next plan. Expect many bullet points and super short posts in this series 😁!

Installation

I installed Next.js with pnpm. But you can install it with npx or yarn. Check out the installation section on Next.js documentation for more information.

  • Run this command to create the project with pnpm :

      pnpm create next-app project-name
    
  • Fill out the prompts.

    create next-app prompts on terminal

    • For now, I don't use TypeScript for this project.

    • It's great that there's an option to include Tailwind, so I don't have to install it separately and configure it myself 😁.

    • I ticked yes for all the yes/no prompts except for creating the src/ directory. I will add it myself later if necessary.

    • My import alias configuration is ~/*. Some people use ~, and some use @. It's all about personal preference.

Next Plan

  • Add pages to the websiteβ€”About Me, Blog, and Contact Me. These pages don't have to have content for now. But they should have a link to go back to the Homepage.

Starter Kits

My friends suggested these starter kits if you want to save time on installation and configuration.

Resources


Thank you for reading! Last, you can find me on Twitter, Mastodon and BlueSky. Let's connect! 😊

Did you find this article valuable?

Support Ayu Adiati by becoming a sponsor. Any amount is appreciated!