Author: M Abo Bakar Aslam

Setting Environment for NextJS Environment

Setting up a development environment for NextJS using Visual Studio Code (VS Code) along with essential tools and extensions. Follow the steps below to get started.

1. Install Node.js and npm

Download and install the latest version of Node.js by clicking on below button.

Note: Install Node.js in the C drive.

When you will click on the button, then you can follow steps shown in below figure

2. Install VS Code

Download and Install VS Code latest version by using below button for download. If you have already installed it, then skip this step.

3. Use Existing App - Already Created by Author

You can either create a new app or use an existing one.

4. Steps to Create a New App

4.1. Create a folder on your computer and open it in VS Code.

Important Guidelines:

• Do not use whitespace in folder names
• Do not use capital letters
• Do not start the folder name with a digit
• Avoid whitespace in the full folder path

4.2. Open the terminal in VS Code. Make sure that path of your current folder is shown.

4.3. Ensure your internet connection is active.

4.4. Run the following command:

npx create-next-app@latest

4.4. When you run above command, then it will ask different parameters for your app

• OK to proceed (y): Press y and hit Enter
• Project Name: Do not use whitespace, capital letters, or start with a digit
• Would you like to use the recommended Next.js defaults?: You can use any of below option
  • Select Yes, recommended hit Enter
  • Select No, customize settings hit Enter. If you select this option, then you will have to do below steps.
    • Would you like to use TypeScript??: Select yes and hit Enter
    • Which linter would you like to use?: Select ESLint and hit Enter
    • Would you like to use React Compiler? Select yes and hit enter
    • Would you like to use Tailwind CSS?: Select yes and hit enter
    • Would you like your code inside a src/ directory? Select No and hit Enter
    • Would you like to use App Router? (recommended) Select Yes and hit Enter
    • Would you like to customize the import alias (@/* by default)? Select Yes and hit Enter
    • What import alias would you like configured? just hit Enter
    • Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? Select No and hit Enter

4.5. When you run above command, then multiple files will be created in your created folder.

4.6. Run below command with your created-folder. By using this command, you will navigate to your React app's directory using the cd command.

cd yourappname

4.7. If there is no folder named as node_modules in your project, then run below command. Otherwise you can skip this step

npm install

4.8. Run your application by runnin below command. This command you will have to run everytime when you want running the application.

npm run dev