Setting Up a Next JS Development environment

Table of contents:

• Tools you need
• Visual studio extensions to use
• Starting the development server

1. What do I need to set up a next js development environment and start working right away?

• Node js
• Code Editor

Node js

To run next js you need to have node version 16 or higher. To install node head to https://nodejs.org/en and download the latest version preferably the LTS version

Code Editor

You also need a code editor to write you code. There are many code editors out there and you can use your preferred editor. I highly recommend visual studio code.

To install Visual studio code head over to https://code.visualstudio.com/ and download vs code

2. Visual studio extensions to use

• ES7+ React/Redux/React-Native snThis extension gives us a bunch of code snippets to use to make our development fast
• JavaScript and Typescript NightlyThis extension helps in syntax highlighting
• Tailwind CSS IntelliSenseThis extension provides visual CSS classes generated by tailwind classes

3. Creating your first Next js Project

Run the following command :

$ npx create-next-app@latest        

Follow through the questions and answer them as you would like...

here is a sample of my own:

After it is done cd into your project

$ cd my-first-next-app        

run the following command

$ npm run dev        

Open the browser on localhost:3000/ and you will see your changes.

for more details head over to the next js documentation

lets connect here on linkedin and github

#nextjs #webdevelopment #vercel