Navigating Between Pages

Learn Next.js introduces the Next.js Link component as a way to navigate between pages without a full page reload. Links use an `href` and should have an `a` tag as their first child. Next.js also prefetches linked pages, which can make navigation feel faster.

The example creates a `post/[someId]` page, where the bracketed segment marks a variable route value. The `useRouter` hook exposes that value through `router.query`. Links can point to `/post/[id]` and use `as` to show a specific path, such as `/post/first-post`.

Learn Next.js uses `getInitialProps` to fetch a post from JSONPlaceholder before rendering the page. The route ID selects the post, and the component displays its title and body. The same approach can call other APIs, including a project's own API.

The login example uses `useRouter` and `router.push` to send the user to a dashboard after clicking the login button. The dashboard fetches profile details from the GitHub API with `getInitialProps` and renders fields such as name, bio, and blog. The demo shows the redirect and data fetch, but does not implement authentication.

The module closes by recapping client-side navigation with Link, dynamic routes, redirects with `router.push`, and page data fetching with `getInitialProps`. Together, these examples show how routes and API data can shape the pages in a Next.js app.