How to Set Up Next Js Project In VS code

 Prerequisites:

•   Install Visual Code Download Visual Studio Code - Mac, Linux, Windows
•   Install NodeJs Node.js — Download Node.js® (nodejs.org)

How to Create New NextJs Project

• Open Visual Studio Code
• Select the folder path where you want to create project.
• Click on Terminal menu on top.
• It will open to terminal window to run the commands.
• Run the command -   npx create-next-app@latest
• You may notice below error:
  
  
  npx : The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was 

  included, verify that the path is correct and try again.

  At line:1 char:1

  + npx create-next-app@latest
  
  
  If you receive the above Error please make sure that you have installed NodeJS in your system.  You can check the version of node js by command  node -v.
  
  
  To resolve: 
  • try to restart VS code

  • npm i -g npx install npx globally. 

  • Try to restart system. 

It will ask for Project Name(please make sure all letters in small case)

• Type script you want to choose? Click yes and continue
• √ What is your project named? ... employee-ui
• √ Would you like to use TypeScript? ... No / Yes
• √ Would you like to use ESLint? ... No / Yes
• √ Would you like to use Tailwind CSS? ... No / Yes
• √ Would you like to use `src/` directory? ... No / Yes
• √ Would you like to use App Router? (recommended) ... No / Yes
• √ Would you like to customize the default import alias (@/*)? ... No / Yes

Once it done, It will take a while create project. After that you project folder will be created.

To run the project, navigate to Project root folder. ( Re- open the Project folder which you created). Run the below command

• npm run dev

Now you will be project is ready , you can check in browser.

http://localhost:3000