Introduction to Next.js
Understanding the React framework for production
🌟 What is Next.js?
Next.js is a React framework that enables server-side rendering and static site generation for building fast, SEO-friendly web applications with minimal configuration.
// A simple Next.js page component
export default function Welcome() {
return <h1>Hello from Next.js!</h1>
}
Output:
Hello from Next.js!
Key Features of Next.js
Server-Side Rendering
Pages are rendered on the server for better performance and SEO
// Rendered on server
export default function Page() {
return <div>SSR Page</div>
}Static Generation
Pre-render pages at build time for maximum speed
// Static page
export default function About() {
return <div>About Us</div>
}API Routes
Build backend APIs directly in your Next.js app
// API endpoint
export async function GET() {
return Response.json({ msg: 'Hi' })
}File-Based Routing
Create routes by adding files to the app folder
// app/about/page.js
export default function About() {
return <div>About</div>
}🔹 Next.js vs React
Next.js builds on top of React, adding powerful features that make development easier. While React is a library for building user interfaces, Next.js is a complete framework with built-in routing, optimization, and server capabilities.
React (Library):
- Component-based UI library
- Client-side rendering only
- Requires additional setup for routing
- Manual optimization needed
Next.js (Framework):
- Built on React with extra features
- Server-side rendering included
- File-based routing built-in
- Automatic optimization
🔹 Your First Next.js Component
Next.js components are just React components. Here's a simple example showing how easy it is to create interactive elements with state and events.
// app/page.js
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Click Me
</button>
</div>
)
}Output:
Count: 0
🔹 Rendering Methods
Next.js offers different ways to render your pages, each optimized for specific use cases. Understanding these methods helps you build faster applications.
🔸 Server Components (Default)
// Runs on server by default
export default function ServerPage() {
return <div>This renders on the server</div>
}🔸 Client Components
// Add 'use client' for interactivity
'use client'
export default function ClientPage() {
return <button>Interactive Button</button>
}🔹 Why Choose Next.js?
Next.js is trusted by major companies and developers worldwide for building production-ready applications. Its combination of performance, developer experience, and built-in features makes it an excellent choice for modern web development.
Performance
Automatic code splitting, image optimization, and fast refresh
SEO Ready
Server rendering ensures search engines can index your content
Zero Config
Works out of the box with sensible defaults
Full-Stack
Build frontend and backend in one codebase