Tutorials/NextJS/Getting Started
Lesson

Installation

Getting Started/NextJS
TutorialsNext

Installation

Next.js is an open-source React framework used to build full-stack web applications. It is created and maintained by Vercel.

It allows you to:

  • Build UI using React components

  • Add backend logic using API routes

  • Improve performance with server-side rendering

It is built on Server Components, which help render content faster and more efficiently.

Pre-requisite Knowledge

Before learning Next.js, you should know:

  • HTML

  • CSS

  • JavaScript

  • React

Create Your First Next.js App

Install Node.js : Make sure Node.js is installed on your system.

Installation locally

Create a new Next.js app and run it locally

plaintext
npx create-next-app my-next-app

cd my-next-app

npm run dev

Setup Options

You will see prompts like:

  • Project name

  • TypeScript (Yes/No)

  • ESLint (Yes/No)

  • Tailwind CSS (Yes/No)

  • App Router (Recommended: Yes)

Create App (CLI)

javascript
npm create next-app

You will see options like:

  • TypeScript (Yes/No)

  • Tailwind CSS

  • App Router

  • ESLint

Choose recommended defaults for best setup

Manual Installation

javascript
npm i next react react-dom

Add scripts in package.json:

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

Next.js Scripts

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

Explanation:

  • dev → Start development server

  • build → Create production build

  • start → Run production server

  • lint → Check code quality

  • export → Convert to static site

Add TypeScript in Next.js

javascript
npm install --save-dev typescript @types/react @types/node

Then:

  • Rename .js → .ts or .tsx

  • Next.js auto-detects TypeScript

Create a Simple Page

javascript
// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

Explanation:

  • pages/index.js → Home route (/)

  • Each file = one route

  • Component returns UI

Pages and Routing

File-Based Routing

Next.js uses folder structure for routing:

  • pages/index.js → /

  • pages/about.js → /about

Pages

  • Each page is a UI for a route

Layouts

  • Shared UI across multiple pages

  • Do not re-render on navigation

Navigation in Next.js

Using Link Component

plaintext
import Link from "next/link";

<Link href="/about">
  About Page
</Link>

Using useRouter Hook

  • Used for programmatic navigation

  • Works only in client components

Advanced Routing

Route Groups

  • Folder inside ( )

  • Helps organize routes without changing URL

Dynamic Routes

  • Use [id] format

  • Example: /blog/[id]

Special Files

  • loading.js → Show loading UI

  • error.js → Handle errors

  • route.js → Custom API handlers

SEO in Next.js

Next.js improves SEO using:

  • Server-side rendering

  • Automatic code splitting

  • Meta tags support

API Routes

Next.js allows backend logic inside the same project.

Example:

  • pages/api/users.js

  • Accessible via /api/users

Data Fetching in Next.js

4 Ways to Fetch Data

  1. Server-side using fetch

  2. Server-side using libraries

  3. Client-side using route handlers

  4. Client-side using libraries (SWR, React Query)

Server-Side vs Static Fetching

getStaticProps (SSG)

  • Runs at build time

  • Best for static data

getServerSideProps (SSR)

  • Runs on every request

  • Best for dynamic data

Example: Static Data Fetching

plaintext
export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();

  return {
    props: {
      posts: data,
    },
  };
}

Caching and Revalidation

Caching

  • Stores data to avoid repeated fetching

Revalidation

  • Updates cached data

Types:

  • Time-based

  • On-demand

Features of Next.js

  • Server-Side Rendering (SSR)

  • Static Site Generation (SSG)

  • File-Based Routing

  • API Routes

  • Code Splitting

  • Image Optimization

  • TypeScript Support

Limitations of Next.js

  • No built-in state management

  • No fixed styling solution

You can use:

  • Redux / Context API

  • Tailwind / CSS Modules

What is App Router?

App Router is a modern routing system in Next.js.

Key Points:

  • Uses folder-based structure

  • Supports layouts and nested routes

  • Improves performance

  • More flexible than old pages router

TutorialsNext
Installation | NextJS | Softcrayons Tech Solutions