NextJS Next.js Basics Syllabus

Next.js Basics syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Next.js Basics in NextJS, not a summary of it.

1. 1

   Introduction

   3 topics

   • What is Next.js?
   • History and Evolution
   • Core Features
2. 2

   Setup and Installation

   4 topics

   • System Requirements
   • Installing Node.js and npm
   • Creating a New Next.js Project
   • Project Structure Overview
3. 3

   Core Concepts

   4 topics

   • Pages and Routing
   • Static and Dynamic Routing
   • Link Component
   • API Routes

Next.js Basics flashcards for NextJS

18 of 51 cards from the Next.js Basics deck — real questions with worked answers.

1. What is Next.js?

   Next.js is an open-source React framework, built and maintained by Vercel, that adds production features on top of React such as server-side rendering (SSR), static site generation (SSG), file-based routing, API routes, and built-in optimizations for building full-stack web applications.

2. Who created and maintains Next.js?

   Next.js was created by the company Vercel (formerly ZEIT) and is maintained by Vercel together with the open-source community.

3. Next.js is a framework built on top of which JavaScript library?

   React. Next.js is a React framework that extends React with rendering, routing, and tooling features.

4. What core problem was Next.js designed to solve that plain React (a client-side SPA) struggles with?

   Plain client-side React renders in the browser, causing poor SEO and slow initial load. Next.js solves this by enabling server-side rendering and static generation so pages arrive pre-rendered as HTML, improving SEO and time-to-first-content.

5. In what year was Next.js first released?

   Next.js was first released in 2016 (version 1.0, in October 2016).

6. Which Next.js version introduced the App Router as the recommended routing paradigm?

   Next.js 13 (released in 2022) introduced the App Router (the app/ directory) built on React Server Components; it became stable in Next.js 13.4.

7. What are the two routing systems available in modern Next.js, and which directories do they use?

   The Pages Router (uses the pages/ directory, the original system) and the App Router (uses the app/ directory, introduced in Next.js 13 and built on React Server Components).

8. Name at least four core features of Next.js.

   File-based routing, server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), API routes, automatic code splitting, built-in image/font optimization, and fast refresh.

9. What is 'file-based routing' in Next.js?

   A routing system where the file and folder structure inside the routing directory (pages/ or app/) automatically defines the application's URL routes, so no manual route configuration is needed.

10. What are the four main rendering strategies Next.js supports?

    Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).

11. What is the difference between SSR and SSG in Next.js?

    SSR (Server-Side Rendering) generates the HTML on the server on every request at runtime, while SSG (Static Site Generation) generates the HTML once at build time and serves the same pre-built page for all requests.

12. What is Incremental Static Regeneration (ISR) in Next.js?

    ISR lets you update static pages after build time by regenerating individual pages in the background on a defined revalidation interval, combining the speed of static generation with the freshness of dynamic data.

13. What is 'automatic code splitting' in Next.js and why does it matter?

    Next.js automatically splits code so each page only loads the JavaScript it needs, rather than one large bundle. This reduces initial load time and improves performance.

14. What is Fast Refresh in Next.js?

    Fast Refresh is a development feature that instantly reflects edits to React components in the browser while preserving component state, giving near-instant feedback without a full page reload.

15. What is the minimum Node.js requirement for recent versions of Next.js (Next.js 14+)?

    Next.js 14 requires Node.js 18.17 or later. (Next.js 13 required Node.js 16.14+.)

16. Which operating systems can you run Next.js development on?

    Next.js is cross-platform and runs on Windows, macOS, and Linux, since it runs on the Node.js runtime.

17. What is Node.js?

    Node.js is a JavaScript runtime built on Chrome's V8 engine that lets JavaScript run outside the browser (e.g., on a server). Next.js requires Node.js to build and run applications.

18. What is npm?

    npm (Node Package Manager) is the default package manager bundled with Node.js, used to install, manage, and share JavaScript packages and dependencies.

See more Next.js Basics flashcards →

Planning Next.js Basics for NextJS

Next.js Basics (NextJS) FAQ