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
