What is Next.js and How to Use It

calendar Sep 22, 2025 · 2 min read · next.js react full stack web development fastapi postgres hello world  ·
Share on: linkedin copy

Next.js is a simple tool to make websites that open very fast. You can build frontend and simple backend APIs in one place, making development easier and more organized. Generally website is categorized into 2 groups:

1. Backend

The backend handles server-side operations, data management, and application logic.
Key technologies:

  • FastAPI – High-performance Python web framework for APIs.
  • Postgres – Reliable, powerful database system.
  • Logic & APIs – Processes business logic and connects with the frontend.

2. Frontend

The frontend is what users see and interact with.
Key technologies:

  • HTML, CSS, JS – Core web building blocks.
  • React, Next.js – Modern frameworks for dynamic and responsive UIs.

What is Next.js?

Next.js is a React framework that simplifies full-stack web development and adds modern capabilities for speed and SEO. Key Advantages

  • Full Stack React Framework: Combines frontend and backend features.
  • SEO Friendly: Server-side rendering (SSR) and static site generation (SSG) help with search engine ranking.
  • High Performance: Optimized loading and rendering.
  • Built-in Routing: Pages and navigation without extra setup.
  • Easy Maintenance: Clean architecture and scalability.
  • Modern Features: Image optimization, API routes, and more.

By using FastAPI and Postgres for the backend and React + Next.js for the frontend, you can build fast, scalable, and SEO-friendly applications.

Create a Basic Hello World App with Next.js

Step 1: Install Next.js

Make sure Node.js and npm (or yarn) are installed.
Open your terminal and run:

1npx create-next-app@latest hello-world

Step 2: Navigate to Project Folder

After installation completes, go to the project directory:

1cd hello-world

Step 3: Start the Development Server

Run the development server to preview your new Next.js app:

1npm run dev

Step 4: Open and Edit the Home Page

Once the development server is running, open the project in your code editor.
Locate the main page file:

  • Pages Router (Next.js 12 and earlier): pages/index.js
  • App Router (Next.js 13+): app/page.tsx or app/page.js

Replace the default content with a simple Hello World example:

1export default function Home() {
2  return <h1>Hello World</h1>;
3}
4
5### Step 5: View in Browser
6Save the file and open your browser to [http://localhost:3000](http://localhost:3000).  
7You should now see **Hello World** displayed on the screen.