This post is based on Packt’s course on Coursera

Next.js 14 from Scratch

Prerequisite

You must have a good understanding of React - a framework - and JavaScript (Or TypeScript) - a language - before you can move on with this post.

What is Next.js?

Next.js is a powerful open-source framework for building React-based web applications with server-side rendering (SSR) and static site generation (SSG), offering advantages over traditional single-page applications (SPAs).

You can go to their website - the main page - and you’ll find basically all the basic information on the page.

Types of Websites and Rendering Approaches

• Static websites consist of separate HTML files for each page, are fast but lack interactivity and are hard to maintain.
• Single-page applications load a single HTML file and dynamically update content with JavaScript, providing a smooth user experience but slower initial load and poor SEO.
• Server-side rendered applications combine static and SPA benefits by generating HTML on the server for fast initial loads and then enabling dynamic interactivity on the client.
• Statically generated websites pre-build HTML at build time for very fast delivery but require rebuilding to update content, suitable for mostly static data.

Server-Side Rendering(SSR) VS Client-Side Rendering (CSR)

• Client-Side Rendering

Browser requests page
↓
Download JavaScript
↓
JS renders content
↓
Page visible + interactive

• Server-Side Rendering

Browser requests page
↓
Server fetches data
↓
Browser shows HTML
↓
JS hydrates page

Key Features of Next.js

• File-based routing automatically maps files in the pages folder to routes, simplifying navigation setup.
• API routes allow server-side code to handle database interactions without needing a separate backend framework.
• React Server Components render on the server for SEO benefits and fast load times, with some limitations on hooks and event listeners.
• Environment variables support secure storage of sensitive data like API keys.
• Built-in support for meta tags, image optimization, automatic code splitting, TypeScript, CSS modules, Tailwind CSS, and a fast refresh development server enhance developer experience and performance.

Project Setup and Initialization

We use the create next app utility via NPX to scaffold a new project named “Property Pulse.”

During setup, we keep the default options but enable two things: Tailwind CSS and the new app router for file-based routing.

Running the app

Once the projects is created, open the folder in a code editor like Visual Studio Code.

Then run the dev server with:

npm run dev

This launches the app locally at localhost:3000.

Project Structure Overview

The package.json file lists dependencies like React, Next.js, and Tailwind CSS. The next.config.js file will later be configured for Cloudinary image hosting. The main code lives inside the app folder, which replaces the older pages folder used for routing in previous versions of Next.js.

Glossary

• Hydration: The process where JavaScript attaches event listeners and interactivity to server-rendered HTML that was already visible but static.