Learn the basics of React and Next.js

About React and Next.js

Next.js is a flexible React framework that gives you building blocks to create fast, full-stack web applications. But what exactly do we mean by this? Let's spend some time expanding on what React and Next.js are and how they can help you build web applications.

Building blocks of a web application

There are a few things you need to consider when building modern applications. Such as:

• User Interface - how users will consume and interact with your application.
• Routing - how users navigate between different parts of your application.
• Data Fetching - where your data lives and how to get it.
• Rendering - when and where you render static or dynamic content.
• Integrations - what third-party services you use (for CMS, auth, payments, etc.) and how you connect to them.
• Performance - how to optimize your application for end-users.
• Scalability - how your application adapts as your team, data, and traffic grow.
• Developer Experience - your team's experience building and maintaining your application.

For each part of your application, you will need to decide whether you will build a solution yourself or use other tools, such as packages, libraries, and frameworks.

What is React?

React is a JavaScript library for building interactive user interfaces. By user interfaces (UI), we mean the elements that users see and interact with on-screen.

By library, we mean React provides helpful functions (APIs) to build UI, but leaves it up to the developer where to use those functions in their application.

Part of React's success is that it is relatively unopinionated about the other aspects of building applications. This has resulted in a flourishing ecosystem of third-party tools and solutions, including Next.js.

It also means, however, that building a complete React application from the ground up requires some effort. Developers need to spend time configuring tools and reinventing solutions for common application requirements.

Thinking in React

React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them.

Programmatic React features:

• Hooks - Use different React features from your components.
• Components - React supports all of the browser built-in HTML and SVG components.
• APIs - The react-dom package contains methods supported only in web applications.
• Client APIs - The react-dom/client APIs let you render React components on the client (in the browser).
• Server APIs - The react-dom/server APIs let you render React components to HTML on the server.

Rules of React

React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:

• Components and Hooks must be pure – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
• React calls Components and Hooks – React is responsible for rendering components and hooks when necessary to optimize the user experience.
• Rules of Hooks – Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.

What is Next.js?

Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application. Next.js enables you to create high-quality web applications with the power of React components.

You can use React to build your UI, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, and caching - all while improving the developer and end-user experience.

Whether you're an individual developer or part of a larger team, you can use React and Next.js to build fully interactive, highly dynamic, and performant web applications.

Next.js Features:

• Built-in Optimizations: Automatic Image, Font, and Script Optimizations for improved UX and Core Web Vitals.
• Dynamic HTML Streaming: Instantly stream UI from the server, integrated with the App Router and React Suspense.
• React Server Components: Add components without sending additional client-side JavaScript. Built on the latest React features.
• Data Fetching: Make your React component async and await your data. Next.js supports both server and client data fetching.
• Client and Server Rendering: Flexible rendering and caching options, including Incremental Static Regeneration (ISR), on a per-page level.
• Server Actions: Run server code by calling a function. Skip the API. Then, easily revalidate cached data and update your UI in one network roundtrip.
• Route Handlers: Build API endpoints to securely connect with third-party services for handling auth or listening for webhooks.
• Advanced Routing & Nested Layouts: Create routes using the file system, including support for more advanced routing patterns and UI layouts. - Middleware: Take control of the incoming request. Use code to define routing and access rules for authentication, experimentation, and internationalization.

App Router vs Pages Router

Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.

Essential JavaScript for React and Next.js

While you can learn JavaScript and React at the same time, being familiar with JavaScript can make the process of learning React easier.

Now you will be introduced to some core concepts of React from a JavaScript perspective. Here's a summary of the JavaScript topics that will be mentioned:

• Functions and Arrow Functions
• Objects
• Arrays and array methods
• Destructuring
• Template literals
• Ternary Operators
• ES Modules and Import / Export Syntax

It's good practice to stay up to date with the latest versions of JavaScript. But if you don't feel proficient in JavaScript yet, don't let this hinder you from starting to build with React! Check our post on JavaScript Concepts You Should Know Before Learning React and Next.js