What is Next.js

Introduction

Next.js helps you build websites and apps easily with React. It makes your site fast and ready for search engines.

You want to create a website that loads quickly and works well on phones and computers.

You need your website to show up well in Google and other search engines.

You want to build a React app but want simpler ways to handle pages and data.

You want to mix server-side and client-side code smoothly in one project.

Syntax

NextJS

import React from 'react';
import { useState } from 'react';

export default function Page() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Hello from Next.js!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

Next.js uses React components to build pages.

Each file in the app folder becomes a page automatically.

Examples

A simple page component that shows a heading.

NextJS

export default function Home() {
  return <h1>Welcome to Next.js!</h1>;
}

Another page component for a different route.

NextJS

export default function About() {
  return <p>This is the about page.</p>;
}

Using Next.js built-in Image component for optimized images.

NextJS

import Image from 'next/image';

export default function Logo() {
  return <Image src="/logo.png" alt="Logo" width={100} height={100} />;
}

Sample Program

This Next.js page shows a button that counts how many times you click it. It uses React's useState to keep track of clicks. The button has an accessible label for screen readers.

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <main style={{ padding: '2rem', fontFamily: 'Arial, sans-serif' }}>
      <h1>Simple Counter</h1>
      <button onClick={() => setCount(count + 1)} aria-label="Increase count">
        Click me
      </button>
      <p>You clicked {count} times.</p>
    </main>
  );
}

Important Notes

Next.js automatically handles routing based on your file structure.

It supports server-side rendering and static site generation for better speed.

Use the app folder for new projects with Next.js 13+.

Summary

Next.js is a tool to build React websites easily and fast.

It helps with page routing, loading speed, and SEO.

You write React components, and Next.js handles the rest.