NEXT JS - How to setup a basic Next JS Project

Next.js is a flexible React framework that gives you neater development and smoother server side rendering without having to setup a horrendous WebPack config file!

So to summarize :

Its Built on React ( Facebooks Javascript Framework For Progressive web apps).

React is based on creating a 2nd fake DOM(document object model) but its pretty much an open book for setting up most project types , there's no React supported configuration to bring it all together. It's up to you to find another Project that has this already setup or use another Framework like Gatsby JS to get it started Quicker.

This website is built on Gatsby JS but since I've learnt a bit more about Next JS the move is only going to be a matter of time..

Next JS includes Hot Reloading automatically configured pretty much out of the box with no need to check your Web Pack version and change your linters to try and build it all smoothly..

Web Pack is the most popular hot reloading tool for React but can be a nightmare to setup as mentioned earlier. Everything is open source in some way and as I Understand this leaves no clear affiliation with official packages. Facebooks React Team are just pushing updates to a community where as teams like Next JS are actually trying to deliver something developers can use effectively.

Getting Started with A Next JS Application

To get the development environment you've got make sure you're familiar with Node JS and have a package manager like NPM installed on your system. This can differ slightly from Windows to Mac

Download Node JS from the Official Site or see my guide to setting up Node and NPM

You’ll need Node.js version10.13 or later.

Whichever Text Editor you USE...I suggest VS Code or Sublime or Notepadd++.

Mostly VS code for folder management and extensions.

Open the terminal or CMD and Type the following

npx create-next-app nextjs-blog --use-npm --example ""

You now have a new directory called nextjs-blog. Let’s cdinto it:

cd nextjs-blog

npm run dev
//This starts your Next.js app’s "development server" (more on this later) on port 3000.

//Let’s check to see if it’s working. Open http://localhost:3000 from your browser.

You Should see the Welcome To Next JS Screen :)

© 2022 DevDarren • Loaded with ❤️ by DevDarren