Building Portfolio: Install Next.js and Tailwind with pnpm

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.
- 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.

Next.js, React Query, and Tailwind starter kit — thank you, Jessica Wilkins!
T3 — Full-stack, typesafe Next.js app — thank you, Joe Karow!

Resources

Next.js docs
How to install nextjs with pnpm by Rajdeep Singh

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

Building Portfolio: Install Next.js and Tailwind with pnpm

Comments

Building In Public: Building AdiatiAyu Portfolio with Next.js

Building Portfolio with Next.js: Add Pages

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

Installation

Next Plan

Starter Kits

Resources

Command Palette

Comments

Building In Public: Building AdiatiAyu Portfolio with Next.js

Building Portfolio with Next.js: Add Pages

More from this blog

Installation

Next Plan

Starter Kits

Resources