How To Install Next.js in Visual Studio Code in 4 min

Step-by-Step Guide to Installing Next.js and Setting Up Tailwind CSS in Visual Studio Code

In this guide, I'll walk you through the process of setting up a Next.js project and integrating Tailwind CSS for styling, all within Visual Studio Code. By the end, you’ll have a fully functional Next.js app styled with Tailwind CSS!

Prerequisites

1. Node.js: Make sure Node.js is installed on your computer. Next.js requires version 18 or higher.

2. Visual Studio Code: Open your project here, as it provides a consistent terminal experience across Windows and Mac.

Step 1: Check Node.js Installation

1. Open Terminal in Visual Studio Code:

   • Go to the top menu and select Terminal > New Terminal.

   • Or use the shortcut Ctrl + ~ (tilde) to open the terminal.

2. Verify Node.js Installation:

   • Run the following command to check your Node.js version:

node -v

1. • Copy code

     node -v

   • If you don’t have Node.js installed, download it from Node.js, choosing the LTS version. Follow the installation prompts.

2. Verify NPM Installation:

   • Node.js installation automatically includes npm. Confirm its version with:

npm -v

1. • Copy code

     npm -v

Step 2: Create a Project Folder

1. On your desktop or a location of your choice, create a folder named projects (or any preferred name).

2. Inside, create another folder for your Next.js app. For this example, we’ll name it my-next-app.

3. Drag and drop this folder into Visual Studio Code to open it.

Step 3: Install Next.js

1. Run the Next.js Installation Command:

   • In the terminal, use npx to install Next.js:

npx create-next-app@latest my-next-app

1. • Copy code

     npx create-next-app@latest my-next-app

   • Here’s a breakdown of the installation prompts:

     • Project Name: Enter my-next-app or another name. Avoid uppercase letters or starting with a number.

     • TypeScript: Choose No (or Yes if you want TypeScript).

     • ESLint: Choose No (or Yes if you need linting).

     • Tailwind CSS: Select Yes to automatically install and configure Tailwind.

     • Source Directory: Select Yes to store your code in a src directory.

     • App Router: Choose Yes to enable routing (like React Router).

     • Turbo Pack: Choose No.

     • Custom Imports: Select No.

2. Navigate to Your Project Directory:

   • Once the setup completes, move into the newly created project directory:

cd my-next-app

1. • Copy code

     cd my-next-app

Step 4: Start the Development Server

1. In the terminal, run the following command to start your Next.js app in development mode:

npm run dev

1. Copy code

   npm run dev

2. After a few seconds, your app will be live at

http://localhost:3000

1. .

   • Hold Ctrl and click the link in the terminal to open it.

   • Alternatively, open a browser and go to http://localhost:3000

Step 5: Verify Tailwind CSS Setup

1. Open any page file, like src/pages/index.js.

2. In the classes, you’ll notice Tailwind’s utility classes ready for styling. With Tailwind installed, you can now apply utility-first CSS classes directly in your JSX.

Wrap Up

That’s it! You now have a Next.js app with Tailwind CSS configured. Tailwind’s powerful styling makes it easy to quickly build and customize UIs.

Thank you for following along. Happy coding!