# 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`](https://pnpm.io/). But you can install it with `npx` or `yarn`. Check out [the installation section](https://nextjs.org/docs/getting-started/installation) on Next.js documentation for more information.

* Run this command to create the project with `pnpm` :
    
    ```powershell
    pnpm create next-app project-name
    ```
    
* Fill out the prompts.
    
    ![create next-app prompts on terminal](https://cdn.hashnode.com/res/hashnode/image/upload/v1688985952078/3470636b-edfe-41b2-9210-d45feb446a47.jpeg align="center")
    
    * 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](https://nextjs.org/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases#module-aliases) 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](https://starter.dev/kits/next-react-query-tailwind/) starter kit — thank you, [Jessica Wilkins](https://twitter.com/codergirl1991)!
    
* [T3 — Full-stack, typesafe Next.js app](https://create.t3.gg/) — thank you, [Joe Karow](https://twitter.com/JoeKarow)!
    

## Resources

* [Next.js docs](https://nextjs.org/)
    
* [How to install nextjs with pnpm](https://medium.com/frontendweb/how-to-install-nextjs-with-pnpm-a958f1b3e9ad) by Rajdeep Singh
    

---

Thank you for reading! Last, you can find me on [**Twitter**](https://twitter.com/@AdiatiAyu), [**Mastodon**](https://hachyderm.io/@AdiatiAyu) and [**BlueSky**](https://bsky.app/profile/adiati.ayu.bsky.social). Let's connect! 😊