Next.js Explained: React, Ready for Production

Introduction

React, covered in the very first post of this series, is a library for building interfaces — but a real website needs more: routing between pages, fast first loads, search-engine visibility, and a place for server code. Next.js is the framework that adds all of that on top of React, and it is now the standard way to build production React sites, from company homepages to large stores.

Rendering: server first, then interactive

A plain React app sends the browser a nearly empty page and builds the content with JavaScript — slow to first paint, and invisible to search engines until the JavaScript runs. Next.js renders pages on the server first, so the browser receives real HTML immediately, and then "hydrates" it — attaching interactivity on top. Visitors see content faster, search engines can read it, and the page still behaves like a React app afterwards.

Routing by files: folders become pages

Next.js routing needs no configuration: files in the app folder become pages automatically.

app/
  page.tsx        →  the homepage (/)
  about/page.tsx  →  /about
  blog/[slug]/page.tsx  →  /blog/anything

Create a file, and the route exists. Square brackets mark dynamic segments — [slug] matches any post name — so a blog with a thousand posts needs one template file, not a thousand routes. Compared with wiring up a router by hand, this convention saves an entire layer of setup code.

API routes: a backend in the same project

Next.js also lets you write server code in the same project, as API routes — small functions that run on the server when a URL is hit:

// app/api/hello/route.ts
export async function GET() {
  return Response.json({ message: "Hello from the server!" });
}

Visit /api/hello, and you get JSON back. A contact form, a search endpoint, or a database query can live beside the pages that use them, without a separate backend project. For small and medium sites, that single project is the whole stack.

Takeaway

Server rendering for fast first loads and search visibility, routing by files instead of configuration, and API routes for server code in the same project. Next.js is React with the production answers included — which is why, when someone says "build a React site", they usually mean Next.js.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and — unusually for a systems language — genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally us...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls — everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them — each a widget, composed by nesting. Layout widgets (like Row, Column, ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small — fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy — threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait — it st...
Read more