Next.js Create Next App

Next.js is an open-source JavaScript framework created by Vercel which boosts the features of React applications such as Server-Side Rendering and Static Site Generation. It provides many additional features like we get additional data fetching utilities, dynamic API routes, optimized builds, etc.

React is used to create Single-Page Applications (SPAs) whose contents are rendered on the client side. Next.js uses React with some extra functionalities like allowing developers to create applications that can perform server-side actions and pre-fetch routes. It has also support for TypeScript.

System Requirements:

• Node.js 12.22.0 or later
• macOS, Windows, and Linux are supported

Introduction: Next.js is based on react, webpack, and babel. It is an awesome tool for creating web applications and is famous for server-side rendering. Next.js is built by Zeit. Developers with knowledge of HTML, CSS, JavaScript and React can easily learn and switch to next.js.

Getting started with Create Next App: Let’s see the installation process:

Step 1: Installation and Setup: Installation of next.js require npm and node.js. You can install node.js from here. Confirm the installation by running these commands on the terminal. 

node -v
npm -v

Step 2: create-next-app: The easiest way to get started with Next.js is by using create-next-app. With CLI(command line) tool you can quickly start building a new Next.js application. Just like React Js go to the command line and type npx/npm create next-app which will start installing a new Next Js application on your PC with everything set up for you. To get started, use the following command:

npx create-next-app@latest

#  Create Next App can be installed via yarn:
yarn create next-app

# Create Next App can be installed via npm:
npm create next-app

Step 3: Create TypeScript Project: You can create a TypeScript project with the –ts (–typescript flag):

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

Example: Add a file index.js in the page folder and add the following code inside it.

Javascript

import React from'react';
import Link from'next/link';

export default class extends React.Component {
    render() {
        return ( {

        <div>
            <h1>Welcome! You are ready to build
                a Next Js app.</h1>
        </div>
        )
    }
}

Steps to run the application: Write the below code in the terminal to run the application:

npm run dev
yarn dev

Output:

browser window

Now, you can make changes at pages/index.js and see the updated result in your browser/localhost. And now you are ready to start using Next Js for building an interactive website.

Reference: https://nextjs.org/docs/getting-started