In Next.js, components are the building blocks of your web application. They allow developers to create reusable, modular pieces of UI that can be easily managed and updated. Components can range from a simple button to a complex navigation menu or a fully functional form. By using components, Next.js applications remain scalable, maintainable, and organized.
List of Common Next.js Components and Their Uses
1. <Image /> Component
Use: Optimizes images automatically for faster loading and better performance.
Features:
-
Automatic resizing and compression
-
Lazy loading by default
-
Supports modern formats (WebP)
-
Improves SEO and page speed
Example Use:
|
1 2 3 |
import Image from 'next/image'; <Image src="/logo.png" alt="Logo" width={150} height={50} /> |
2. <Link /> Component
Use: Handles client-side navigation between pages with faster page transitions.
Features:
-
Prefetching pages for faster navigation
-
Works with dynamic routes
-
Replaces standard
<a>tags in Next.js apps
Example Use:
|
1 2 3 |
import Link from 'next/link'; <Link href="/about">About Us</Link> |
3. <Head /> Component
Use: Manages the HTML <head> section for meta tags, title, SEO, and scripts.
Features:
-
Add page title and meta description dynamically
-
Include external scripts or styles
-
Helps with SEO optimization
Example Use:
|
1 2 3 4 5 6 |
import Head from 'next/head'; <Head> <title>Home Page</title> <meta name="description" content="Next.js application example" /> </Head> |
4. <Script /> Component
Use: Optimizes third-party or custom scripts for performance and proper loading.
Features:
-
Lazy loading or before/after page load
-
Avoid blocking main thread
-
Control execution order
Example Use:
|
1 2 3 |
import Script from 'next/script'; <Script src="https://example.com/script.js" strategy="lazyOnload" /> |
5. <Error /> or ErrorBoundary
Use: Handles errors in pages and components.
Features:
-
Provides custom error pages
-
Graceful handling of runtime errors
-
Improves user experience
Example:
|
1 2 3 4 |
function ErrorPage() { return <h1>Something went wrong!</h1>; } export default ErrorPage; |
6. <App /> Component (Custom App)
Use: Wraps all pages in a Next.js application to provide global layouts or state.
Features:
-
Persist layouts across pages
-
Add global styles or context providers
-
Customize page initialization
Example:
|
1 2 3 4 |
// pages/_app.js export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } |
7. <Document /> Component (Custom Document)
Use: Customize the server-rendered HTML document structure.
Features:
-
Modify
<html>and<body>tags -
Add global meta tags or fonts
-
Only rendered on the server
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// pages/_document.js import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } |
8. <Main /> and <NextScript />
Use: Used inside <Document /> to render page content and Next.js scripts.
Features:
-
<Main />renders the page content -
<NextScript />includes Next.js JavaScript bundle
9. <Link /> Dynamic Routing
Use: Works with dynamic pages like /blog/[id].js.
Features:
-
Prefetching dynamic pages
-
Smooth client-side navigation
10. <Script /> Strategies
Use: Optimize performance by controlling how and when scripts load.
Strategies:
-
beforeInteractive– load before page becomes interactive -
afterInteractive– default lazy load after page renders -
lazyOnload– load during idle time