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

_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.
    headerfooter

    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.
    auth

    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.
    Metatag

    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.
    lazy

    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:

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:

ourputd

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

Difference between _app.js and _document.js

Feature

_app.js

_document.js

Purpose

It will acts as a root component of your Project.

If you want to customize the HTML document structure you can do the changes in _document.js.

Usage

If you want to add global styles or render some components across all the pages you can add in _app.js

You can customize HTML tags such as <html>, <head>, and <body> tags.

Location

Located in the pages directory.

Located in the pages directory as well.

Example Use Cases

For implementing global styles or layout components.

Adding meta tags for Search Engine Optimization.


For setting up context providers or global state management.

Increase performance by adding lazy loading scripts.

Conclusion

In summary, _app.js is being used for the state management or components we want to be available globally on the other hand _document.js is being used for optimization of you website such as SEO which can be achieved by adding meta tags, and by using defer keyword we can also improve the performance of our website.


 


Reffered: https://www.geeksforgeeks.org

ReactJS

Related
How to Get query params using Server component in Next.js ? How to Get query params using Server component in Next.js ?
How to Fix React useEffect running twice in React 18 ? How to Fix React useEffect running twice in React 18 ?
How To Detect Production or Dev Environment in NextJs? How To Detect Production or Dev Environment in NextJs?
How to Handle Different Environments in a Next.js? How to Handle Different Environments in a Next.js?
How to Add ChartJS in NextJS 13? How to Add ChartJS in NextJS 13?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 18



 

Horje