Difference between _app.js and _document.js files in Next.js

Last Updated : 07 May, 2024

_app.js is the root component of our NextJS application, used for globally accessible components, layouts, and structures. _document.js is being used to increase the performance and SEO of our website.

What is a _app.js?

_app.js is a file in Next.js that contains features such as layout, structure, state management, and custom error handling globally, which are essential for building maintainable web applications.

Features of creating an _app.js:

Global Layout and Structure: You can add a consistent header and footer which will be rendered on all the pages.
Header and Footer component added in _app.js will be available across all the pages

Global State Management: User authentication state can be managed across your application globally.
You can create your own Auth Provider and the authentication will be available globally across your project.

What is a _document.js?

_document.js is a file in Next.js that contains features such as optimization for SEO, which helps in ranking of your website and control over the HTML document structure.

Features of creating an _document.js:

Optimization for SEO:- In_document.js, you can add meta tags.
You can update the meta tag’s content as per your preference in _document.js
Optimizing Performance:- You can add lazy loading to your javascript file.
You can use the feature of Lazy Loading by creating_document.js

Steps to Create Next JS Application and Installing Modules

Step 1: Install basic dependencies by running the following command in your terminal:-

npm install next@latest react@latest react-dom@latest

Step 2: Update your package.json by adding the following scripts:-

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Step 3: Create a pages folder and add _app.js file:-

JavaScript

// _app.js

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Step 4: Create a index.js in pages directory:

JavaScript

// index.js

export default function GFGUser(){
    return <h1>Hello Geeks for Geeks User!!</h1>
}

Output:

Header and Footer components will be available on every page

Step 5: Create a _document.js in pages directory as well:

JavaScript

// _document.js

import { Html, Main, NextScript } from 'next/document'

export default function Document() {
    return (
        <Html lang="en">
            <body>
                <Main/>
                <NextScript/>
            </body>
        </Html>
    )
}

Output:

In chrome’s inspect we can see our meta tags and script tags.