DEV Community

loading...
Cover image for Next JS - Intro And Setup

Next JS - Intro And Setup

Barnabas Babatunde
I am a software developer (web and mobile). I love anything JavaScript!
・4 min read

Introduction:

In this article, I am going to walk you through the introductory aspect of Next JS and how to setup a Next JS project.

What Is Next JS?

Next JS is a framework (built on-top of React JS) that allows us to create pre-rendered React websites.
Pre-rendering could either be by:

  1. Server Side Rendering (SSR), or
  2. Static Site Generation (SSG)

Server Side Rendering:
In Server Side Rendering, React components are rendered (think of it as 'translated') into HTML pages on the server and sent to the browser whenever the browser requests for that particular component.

Static Site Generation:
In Static Site Generation, React components are 'translated' into HTML pages at build time. These pages can then be deployed to the web.

Next JS gives us the ability to use either of these methods. Whichever method you decide to use, one thing is sure:- Your React components have already been 'translated' into HTML by the time they arrive at the browser.

Why Should You Use Next JS over Traditional React JS?

React works by rendering components in the browser (client-side) unlike Next JS which does it on the server-side.

Server-side rendering and Static Site Generation (in other words, using Next JS) helps to/provide:

  1. improve a website's performance on the client-side. This is because the rendering is already done on the server, and the browser is relieved of the task of rendering the components. Better client-side performance!
  2. better Search Engine Optimization (SEO). This is because a fully rendered HTML page arrives at the browser, which is more acceptable to search engine crawlers.



...And more!

Ordinary React JS does not provide these juicy features.

Should You Do Away With React JS?

Absolutely not. You need a good knowledge of React JS in order to work with Next JS. In fact, Next JS is simply a framework built on another framework: React JS.

Let's Setup Next JS

You will need Node JS, so ensure you have Node JS installed on your computer. If you don't, go to nodejs.org to download and install Node JS.



Setting Up
The easiest way to kickstart a Next JS application is by using the create-next-app command. So:

  1. create a new folder anywhere you want on your computer and name it whatever you want. I named mine demo
    folder location

  2. fire up your command line, and change your working directory to that folder by using the command: cd ABSOLUTE_PATH_OF_YOUR_FOLDER. Make sure you are now within that folder, as should be indicated on your command line interface.
    command line

  3. Ensure that you already have create-next-app cli in your Node JS environment. If you do not then run the command: npm install -g create-next-app. This will allow you to use create-next-app to setup a Next JS application anytime you want.

  4. So currently, we are in our demo folder. Now, create your boiler-plate application by running npx create-next-app THE_NAME_OF_YOUR_APPLICATION. I will call mine demo-app.
    You should see something like this running:
    Next JS setting up

  5. After the process is completed, you should see a notice of completion - something like this:
    Next JS setup completed

  6. Check your project folder. You should see your boiler-plate application all nicely setup.

Now, we want to build out our web application, so we open our boiler-plate folder using our favorite text editor. Mine is VS code.

Let's Walk Through The Folders and Files In Our Next JS Boiler-Plate Application.

  1. node_modules: This is where all the dependencies for our application are stored.
  2. pages: This folder is where all our page components will be created. Every web page in Next JS has its corresponding React component. Currently, we have index.js page component in the pages folder. This index.js is the landing page of our website.
  3. _app.js: This is where all our page components are rendered. It is the root component of our application.
  4. /api: This is for our API endpoints.
  5. /public: This is where all public assets are kept. Examples of public assets are images, or font files.
  6. /styles: This contains styles for our web application.
  7. .gitignore: For version control. Used to exclude files and folders from being committed and pushed to your remote git repository.
  8. package.json: Helps you keep track of your application's dependencies.
  9. package-lock.json: Helps to keep track of the exact version of every package(or dependency) that is installed in your application.
  10. README.md: Contains information about your application and its development.

Launching Our Application In Our Browser

Change directory to your new boiler-plate application, by running: cd THE_NAME_OF_YOUR_APPLICATION. After that, run: yarn dev or npm run dev. This command invokes a local development server for us on port 3000. You can now see your website at this address: http://localhost:3000/.
Notice that the landing page is what is contained in our index.js file.
website

Conclusion

In the last few minutes, we have gotten a soft introduction to Next JS, and we have learned how to setup a Next JS application using create-next-app.

Discussion (2)

Collapse
vishalraj82 profile image
Vishal Raj

@barnabas19 Great article. I have written a similar introductory article for React - dev.to/vishalraj82/react-from-scra....

Collapse
barnabas19 profile image
Barnabas Babatunde Author

That's nice 👍