Intro
Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
It also automatically configures lower-level tools like bundlers and compilers. You can instead focus on building your product and shipping quickly.
React Foundations
https://nextjs.org/learn/react-foundations
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.
Chapter 8- From React to Next.js
https://nextjs.org/learn/react-foundations/from-react-to-nextjs
Hydration Error
Text content does not match server-rendered HTML
Hydration is the process where React attaches interactivity (event listeners, state logic, etc.) to the pre-rendered HTML that was generated on the server.
Hydration is the process where static HTML becomes interactive by adding Javascript to it. So normally when a webpage is rendered on the server, it loses its interactivity and event handlers before getting to the client. React is responsible for building the component tree on the client. This is called hydration, because it adds the interactivity and event handlers that were lost when the HTML was server-side rendered. React compares it with the actual server-side rendered DOM. They must be the same so React can adopt it.
If there is a mismatch between the page we have and what the client-side thinks we should have, we get a “Hydration Error.” Some common hydration error causes include: Incorrect HTML element nesting, different data used for rendering, using browser-only APIs, side effects, etc.
- Example: if the server renders
<div id="root">
<button>Count: 0</button>
</div>- But the React compoment renders
<button>Count: 5</button>- React shows error:
❌ Hydration failed because the initial UI does not match what was rendered on the server.
Solution 1: Use useEffect to run on client only
- You can conditionally render the content only on client side
import { useState, useEffect } from 'react'
export default function App() {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}