0:00
/
0:00
Transcript

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

It is so easy to install Next.js using VSCode in under 4 minutes including Nodejs

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

  1. Verify NPM Installation:

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

npm -v
    • 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
    • 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.

  1. Navigate to Your Project Directory:

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

cd my-next-app
    • 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!