Suggest an edit

Improve this article

Refine the answer for “What does the Link component do in Next JS?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `Link` component in **Next.js** handles **client-side navigation between pages** - without a full browser reload like in an SPA, but with the benefits of server rendering.

In short:

> `Link` **= fast navigation between pages, without a reload, with data prefetching**

---

## What `Link` does under the hood

### 1. Client-side navigation (SPA-style transition)

- the URL changes
- the page **does not reload**
- the app's state is preserved

- no `document.reload`
- a smooth UX

---

### 2. Automatic prefetch

When a link **enters the viewport**:

- Next.js loads the page's JS and data ahead of time
- the transition feels instant

You can disable it:

```tsx
<Link href="/blog" prefetch={false}>Blog</Link>
```

---

### 3. Code splitting

- only the **target page's code** is loaded
- not the whole app bundle

---

### 4. Works with server rendering

`Link`:

- respects SSR / SSG / ISR
- uses the already generated HTML
- does not break SEO

---

## Usage example

```tsx
import Link from 'next/link'

<Link href="/blog/my-post">
  Read the article
</Link>
```

---

## Why `Link` is better than a plain `<a>`

| `<a>` | `Link` |
|---|---|
| Full reload | SPA navigation |
| No prefetch | Prefetch out of the box |
| Slow | Fast |
| State is lost | State is preserved |

`<a>` is needed only for **external links**.

---

## Working with dynamic routes

```tsx
<Link href={`/blog/${slug}`}>
  {title}
</Link>
```

---

## Important nuances

- `Link` **does not render** `<a>` **manually** (in the App Router)
- supports `replace`, `scroll`, `prefetch`
- can be used inside Server Components

---

## Short interview answer

> `Link` **in Next.js provides client-side navigation between pages without a reload, with automatic prefetching of code and data, improving performance and user experience.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts298 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.