A custom document is a functionality that allows gives us access to setting up the metadata globally giving us an upper hand in search engine optimization, it can also be used to give styling globally as demonstrated in the later part.
In this article, we will learn how to create the _document.js; which helps the NextJs app greatly in SEO and also importing components and libraries globally.
Creating NextJs application:
Step 1: Create a new next project using the command below. (Make sure you have npm and node installed)
npx create-next-app gfg-doc-app-1
Step 2: After creating your project folder (i.e. gfg-doc-app-1), move to it by using the following command:
cd gfg-doc-app-1
Step 3: Create a _document.js file in the pages folder:
touch _document.js
Project Structure: The project structure should look like below:
This will be the  structure of  our application .
Here as we want to create a custom _document we obviously overwrite the default Document using the concept of OOPs , for more information you can refer to this article.
You may have noticed that the _document.js has a structure similar to a static HTML file , hence you should also know that _document.js is only rendered on the server side and not on the client side, so event handlers like onClick are not going to work.
This functionality provides us the option to write metatags and import custom links globally, meaning each page can have its own metatag and title, if not provided, the _document covers this.
Â
Â
Example: Below is the example that will demonstrate the Next Js Custom Document.
_document.js: Write the below code in the _document.js file.
JavaScript
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<meta name="description"
content="A site for demonstrating use of _document file" />
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
<meta name="author"
content="GeeksForGeeks" />
<meta name="keywords"
content="NextJS,GFG,custom document next,custom app next" />
<link rel="shortcut icon"
href="favicon.ico"
type="image/x-icon" />
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
Write the below code in the index.js file.
JavaScript
import Head from 'next/head'
export default function Home() {
return (
<div >
<Head>
</Head>
<h1>Hello</h1>
</div>
)
}
Steps to run the application: Write the below code in the terminal to run the application:
npm run dev
Output:
Now, right-click on your app and select inspect to access developer tools, which will allow you to see the website changes we did in detail:
Updated Custom Document
Whereas beforehand it was:
Without Custom Document
You can see that we:
- Added description tag which will be shown in the search result.
- Added the author tag which may list the creator or owner of a particular website.
- Added the keywords, which are very important, as if one searches for a website with keywords our website is populated on the search results. Be sure to list only those keywords that are relevant to your content, website, or business.
- Imported bootstrap, a popular CSS framework which can now be used globally similarly we can import libraries like jquery or components like google fonts in this section.
- We also changed the icon of the page.
Similar Reads
Next.js Custom Error Page
Creating a custom error page in Next.js allows you to provide a better user experience when an error occurs, such as a 404 (Not Found) or a 500 (Server Error). Custom error pages can match your site's design and offer helpful information or navigation options. In this article, we will learn how to c
7 min read
Next.js Client Components
Next.js, a popular React framework, has seen significant growth in recent years due to its robust features for building modern web applications. One of the key concepts introduced in Next.js is the distinction between Server and Client Components. In this article, we'll focus on Client Components an
4 min read
Next.js Script Component
The Next.js Script component helps you manage when and how scripts are loaded to make your site perform better. It offers three strategies: beforeInteractive for scripts that need to load immediately, afterInteractive for scripts that are needed after the page becomes interactive but aren’t crucial
5 min read
Next JS Layout Component
Next JS Layout components are commonly used to structure the overall layout of a website or web application. They provide a convenient way to maintain consistent header, footer, and navigation elements across multiple pages. Let's see how you can create and use a Layout component in Next.js. Prerequ
3 min read
Next.js Custom Server
Next.js Custom Server allows advanced customization by overriding default behavior. It enables tailored server-side logic, middleware integration, and API route handling, offering flexibility beyond standard Next.js configurations.Next.js Custom ServerA custom server in Next.js is a Node.js script t
2 min read
Next.js Introduction
Next.js is a powerful and flexible React framework that has quickly become popular among developers for building server-side rendered and static web applications. Created by Vercel, Next.js simplifies the process of developing modern web applications with its robust feature set. In this article, we’
5 min read
Functions in Next JS
Next.js provides a suite of functions and hooks that enhance server-side rendering, static generation, routing, and more. These functions are essential for managing data fetching, handling requests, and optimizing performance in Next.js applications.Next.js FunctionsNext.js functions simplify server
4 min read
Next.js Layouts
Layouts in Next.js allow you to create reusable structures that can be shared across multiple pages. This ensures a consistent look and feel throughout your application while reducing code duplication. Next.js 13 introduced enhanced layout capabilities, allowing for nested and dynamic layouts. In th
6 min read
Next.js Function Fetch
Next.js is a React framework that enhances UI development with built-in features like server-side rendering and static site generation. It supports data fetching both on the server and client sides, enabling developers to load and manage data efficiently. By utilizing functions like fetch, Next.js a
6 min read
Add Comment Section in Next.js
In this article, we are going to learn how we can add a Comment Section in NextJs. Using the comment section users can write their thoughts and queries in your NextJs app. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows,
3 min read