Surya

Learn NextJS 15 from the ground up and build fullstack ReactJS + NextJS apps with the App Router or Pages Router!

Surya Prakash Singh's photo
Surya Prakash Singh
·

3 min read

This is the notes of my nextjs 15 learnings of NEXT JS course

Section 3. Next.js Essentials

BENEFITS OF USING LINK TAG IN NEXTJS

<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

focus on word prefetching

The next/link package in Next.js provides a client-side navigation component that allows you to link between different pages in your application. It enhances the user experience by enabling faster navigation through prefetching and client-side transitions.

Key Features of next/link:

1. Client-Side Navigation:

Pages are navigated without a full-page reload, improving performance and providing a smoother user experience.

2. Prefetching:

By default, Next.js prefetches the resources (like JavaScript and data) for the linked page in the background, ensuring faster navigation when the user clicks the link.

3. Dynamic Routing Support:

Handles links for pages with dynamic routes (e.g., /blog/[slug]).

4. Accessibility:

Automatically renders an <a> element, making it accessible and compatible with screen readers.

5. Custom Behavior:

Works seamlessly with custom event handlers or styles for navigation.

Usage:

Basic Example:

import Link from 'next/link';

export default function HomePage() {

return (

<div>

<h1>Welcome to Next.js</h1>

<Link href="/about">

<a>Go to About Page</a>

</Link>

</div>

);

}

Without <a> Tag:

The next/link component can directly wrap child elements:

<Link href="/contact">Contact Us</Link>

Dynamic Routes:

<Link href="/blog/[slug]" as="/blog/my-first-post">

<a>Read My First Post</a>

</Link>

Open Links in New Tabs:

To add custom attributes, use the <a> tag inside the Link component:

<Link href="/about">

<a target="_blank" rel="noopener noreferrer">About Us</a>

</Link>

Benefits:

Improved Performance: Speeds up navigation by prefetching resources.

Better UX: Eliminates page reloads, offering a seamless SPA-like experience.

SEO-Friendly: Still leverages server-side rendering or static site generation for SEO benefits.

The next/link package is an essential tool in Next.js for building efficient and accessible navigation.

Reserved Filenames

As you already learned, there are some reserved filenames when working with NextJS.

Important: These filenames are only reserved when creating them inside of the app/ folder (or any subfolder). Outside of the app/ folder, these filenames are not treated in any special way.

Here's a list of reserved filenames in NextJS - you'll, of course, learn about the important ones throughout this section:

  • page.js => Create a new page (e.g., app/about/page.js creates a <your-domain>/about page)

  • layout.js => Create a new layout that wraps sibling and nested pages

  • not-found.js => Fallback page for "Not Found" errors (thrown by sibling or nested pages or layouts)

  • error.js => Fallback page for other errors (thrown by sibling pages or nested pages or layouts)

  • loading.js => Fallback page which is shown whilst sibling or nested pages (or layouts) are fetching data

  • route.js => Allows you to create an API route (i.e., a page which does NOT return JSX code but instead data, e.g., in the JSON format)

You also find a list with all supported filenames & detailed explanations in the official docs: https://nextjs.org/docs/app/api-reference/file-conventions