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.

Practice

1. What is Next.js primarily used for?

easy

A. Writing backend server code without frontend

B. Creating mobile apps with native device access

C. Designing databases for web applications

D. Building React-based websites with routing and performance features

Solution

1. Step 1: Understand Next.js purpose

   Next.js is a framework built on top of React to simplify building websites.

2. Step 2: Identify key features

   It adds routing, faster loading, and SEO support to React apps.

3. Final Answer:

   Building React-based websites with routing and performance features -> Option D

4. Quick Check:

   Next.js = React websites + routing + speed [OK]

Hint: Next.js helps build React websites easily [OK]

Common Mistakes:

• Confusing Next.js with mobile app frameworks
• Thinking Next.js is only backend
• Assuming Next.js is a database tool

2. Which of the following is the correct way to create a page in Next.js?

easy

A. Write HTML files in the public folder

B. Add routes manually in a routing config file

C. Create a React component inside the pages folder

D. Use index.html in the root directory

Solution

1. Step 1: Recall Next.js page creation method

   Next.js uses the pages folder where each file is a React component representing a page.

2. Step 2: Compare options

   Only Create a React component inside the pages folder matches this pattern; others describe static or manual routing methods not used in Next.js.

3. Final Answer:

   Create a React component inside the pages folder -> Option C

4. Quick Check:

   Next.js pages = React components in pages folder [OK]

Hint: Pages are React components in the pages folder [OK]

Common Mistakes:

• Thinking HTML files in public folder create pages
• Believing manual routing config is needed
• Using index.html instead of React components

3. What will Next.js do when you create a file about.js inside the pages folder?

medium

A. Serve the page at URL /about automatically

B. Require manual route setup to access /about

C. Ignore the file unless imported elsewhere

D. Throw an error because pages must be in src folder

Solution

1. Step 1: Understand Next.js file-based routing

   Next.js automatically maps files in pages folder to URLs matching the filename.

2. Step 2: Apply to about.js

   The file about.js becomes accessible at /about without extra setup.

3. Final Answer:

   Serve the page at URL /about automatically -> Option A

4. Quick Check:

   File in pages = URL path [OK]

Hint: File name in pages = URL path automatically [OK]

Common Mistakes:

• Thinking manual routing is needed
• Assuming files outside src are required
• Believing files are ignored if not imported

4. You wrote a React component in pages/contact.js but visiting /contact shows a 404 error. What is the likely mistake?

medium

A. The file is placed inside public folder

B. The component is not exported as default

C. Next.js requires manual route registration

D. The file name must be Contact.jsx with uppercase

Solution

1. Step 1: Check Next.js page export rules

   Each page component must be the default export from its file to be recognized.

2. Step 2: Analyze error cause

   If the component is not exported as default, Next.js won't load it, causing 404.

3. Final Answer:

   The component is not exported as default -> Option B

4. Quick Check:

   Pages need default export [OK]

Hint: Always export page component as default [OK]

Common Mistakes:

• Placing pages in public folder instead of pages
• Thinking manual route setup is needed
• Using uppercase file names incorrectly

5. You want to improve SEO and loading speed of your React website. How does Next.js help achieve this?

hard

A. By pre-rendering pages on the server and generating static HTML

B. By running React code only on the client side after page load

C. By disabling JavaScript to speed up loading

D. By converting React components into plain HTML files manually

Solution

1. Step 1: Understand Next.js rendering methods

   Next.js pre-renders pages either at build time or on the server, creating static or server-rendered HTML.

2. Step 2: Connect to SEO and speed benefits

   Pre-rendered HTML loads faster and is better for search engines than client-only React apps.

3. Final Answer:

   By pre-rendering pages on the server and generating static HTML -> Option A

4. Quick Check:

   Next.js pre-renders for SEO and speed [OK]

Hint: Next.js pre-renders pages for SEO and speed [OK]

Common Mistakes:

• Thinking React runs only on client in Next.js
• Believing JavaScript must be disabled
• Assuming manual HTML conversion is needed