Loading

Learn Next Js with installation and a small project

Learn Next Js with installation and a small project

In this article I will briefly discuss NextJs, it's prerequisites, setup and a small Hello World program using NextJs.

# What is NextJs

As per official documentation, NextJs is The React Framework for Production. It provides the best development experience by including all features required for production, such as TypeScript support, hybrid static and server rendering, route pre-fetching, smart bundling, and so on. And the funny thing is No Config Needed.

In React, if you think about building an application using React you know that it is not quite possible to build a full feather based application ready to be deployed for production. React is a library for building user interfaces. It is responsible for only the view layer of an application and you as a developer have to make decisions on other features of the app like routing, styling, authentication etc.

On the other hand, NextJs is a package that uses react for building user interfaces. Loaded with a lot more features that enable it to build full fledged production ready applications with features like routing, styling, authentication, bundle optimization etc. And for these there's no need to install additional packages. NextJs provides everything for you.

# Why you should learn NextJs

NextJs simplifies the process of building a react application for production. Below are some powerful features that NextJs provides us for our application.

  1. NextJs provides File based routing. It means unlike react, no additional package required for routing.
  2. It supports pre-rendering. It generates HTML in advance for each page rather than relying on client-side JavaScript to do so, resulting in a faster and more SEO-friendly application.
  3. Automatic Image Optimization in NextJs lets you to resize, optimise, and serve images in the latest WebP format.
  4. We can also create APIs with NextJs.
  5. NextJs supports multiple authentication patterns each designed for different use cases
  6. It helps to build optimized production build systems with less configuration.
  7. It also supports css modules which helps to choose css libraries.

# Prerequisites

Before starting with NextJs, you should have good knowledge in:

  1. JavaScript, HTML5, and CSS
  2. ES6+ features
  3. ReactJs

You may also like: React - Basic Form building and validation with Formik and Yup

# Setup

To set up your development environment for NextJs you need NodeJs to be installed in your machine. You can download it from NodeJs official website https://nodejs.org/en/ by selecting the LTS version and installing. Just make sure you have NodeJs version 12.0 or later.

To create a NextJs project we recommend you to run the following commands. It will set up everything automatically. No other package needed at all.

npx create-next-app
# or
yarn create next-app

If you want to create NextJs project with TypeScript you can use the --typescript or --ts flag:

npx create-next-app --typescript
# or
yarn create next-app --typescript

After completing the setup process if you open the package.json file you can find the following script:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Where the above different scripts refer to the different stages of developing an application:

dev - By running, it starts Next.js in development mode

build - It builds the application for production usage

start - It starts the Next.js production server.

lint - It sets up Next.js built-in ESLint configuration

# Create a Small Project

Let's create a small Hello World project to understand the whole thing. First, Run the below command:

npx create-next-app hello-world
# or
yarn create next-app hello-world

By running this command we should have our project folder created with the name of hello-world. To run this application we need to navigate into the project folder and run the below command:

cd hello-world

npm run dev
# or
yarn dev

The above command will set up the development server on 3000 port by default. If you run http://localhost:3000 on your browser you can see our hello-world project is up and running with the default NextJs template. Please have a look:

NextJs-wc-page.png

Now, open pages/index.js file, change something and get back to the browser you will see your changes.

Or copy and paste the below lines of code you will see Hello World printed on your browser.

export default function Home() {
    return (
        <h1>Home Page</h1>
    )
}

That's all! and thank you for visiting!!!

You may also like: Lazy Loading with React Suspense

Related Articles

Leave a Reply

Comments