What could be causing my NextJS application to not recognize the _document.tsx file?

Question

What could be causing my NextJS application to not recognize the _document.tsx file?

Seeking assistance in understanding why my _document.tsx is not loading properly within my nextJS application.

My Attempts So Far

I have been diligently following the NextJS documentation for creating a custom _document.js. Despite my efforts, I am unable to make my NextJS app recognize the page. I also attempted a similar approach using _app.js. It's worth mentioning that we use TypeScript so the files are saved as .tsx, etc.

This is how my default folder structure looks like -- apparently, we didn't have a root /pages folder at all, contrary to what the documentation recommends. All our application components reside within /src and /src/app.

https://i.stack.imgur.com/v2RKU.png

You can see from the folder structure that I tried:

Putting it in
```
projectName/src/pages/_document.tsx
```
Trying it in projectName/pages/_document.tsx
Experimenting with
```
projectName/src/app/pages/_document.tsx
```
Even attempting to place _document.tsx directly in both the projectName/src root and projectName/src/app root.

Unfortunately, none of these attempts seem to work: No matter what I do, my _document.tsx just won't load.

Here's the content of my _document.tsx file, containing the script that should ideally be loaded into the section of the application.

As of now, I have a workaround in place, but I anticipate that my team will request me to utilize _document.tsx. Yet, I'm struggling to have my NextJS app locate it (and never seeing the script or console output this is document talking).

If anyone could shed some light on why I am facing difficulty in getting my _document.tsx to load correctly, and where I might be going wrong, it would be greatly appreciated.

import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

class MyDocument extends Document {
  render() {
    console.log("this is document talking");
    return (
      <Html>
        <Head>
          <Script>
            {`window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
  heap.load("123456789");`}
          </Script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

typescript next.js

Answer 1

Answer №1

Typically, the priority is given to app/layout.tsx over pages/_document.tsx when both are available for rendering pages in the application. The pages/_document.tsx will handle rendering of pages within the pages directory, so any page added there will be processed by the script in pages/_document.tsx. If you wish to include a script that applies to all documents in both app and pages, it must be included in both app/layout.tsx and pages/_document.tsx.

Here's an example:

// app/layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
      <Script>{`console.log("layout")`}</Script>
    </html>
  );
}

export default Page;

// pages/document.tsx
class MyDocument extends Document {
  render() {
    console.log("this is document talking");
    return (
      <Html>
        <Head>
          <Script strategy="afterInteractive">{`console.log("pages")`}</Script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// pages/page/1.jsx
import React from "react";
const Page = () => {
  return <div>Page</div>;
};

Upon visiting http://localhost:3000/page/1, https://i.stack.imgur.com/d78Wp.png https://i.stack.imgur.com/XmmgK.png

And on http://localhost:3000/, https://i.stack.imgur.com/8hqxv.png

Answer 2

Typically, the priority is given to app/layout.tsx over pages/_document.tsx when both are available for rendering pages in the application. The pages/_document.tsx will handle rendering of pages within the pages directory, so any page added there will be processed by the script in pages/_document.tsx. If you wish to include a script that applies to all documents in both app and pages, it must be included in both app/layout.tsx and pages/_document.tsx.

Here's an example:

// app/layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
      <Script>{`console.log("layout")`}</Script>
    </html>
  );
}

export default Page;

// pages/document.tsx
class MyDocument extends Document {
  render() {
    console.log("this is document talking");
    return (
      <Html>
        <Head>
          <Script strategy="afterInteractive">{`console.log("pages")`}</Script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// pages/page/1.jsx
import React from "react";
const Page = () => {
  return <div>Page</div>;
};

Upon visiting http://localhost:3000/page/1, https://i.stack.imgur.com/d78Wp.png https://i.stack.imgur.com/XmmgK.png

And on http://localhost:3000/, https://i.stack.imgur.com/8hqxv.png

What could be causing my NextJS application to not recognize the _document.tsx file?

My Attempts So Far

Answer №1

Similar questions

Electron does not have the capability to utilize Google's Speech to Text engine

Using Nestjs to inject providers into new instances of objects created using the "new" keyword

Unable to transfer props object to React component using TypeScript

Forwarding from server side in NextJS 13

Using NextJs to pass a prop as a className

The useSelector from @reduxjs/toolkit in Next.js is returning an undefined value

Unable to retrieve content using the query.ID in Next.js

When a reaction function is triggered within a context, it will output four logs to the console and

Tips on preventing repeated data fetching logic in Next.js App Routes

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

Tips on extracting value from a pending promise in a mongoose model when using model.findOne()

Refresh default settings for the nextui button

The inability to destructure the 'store' property from the 'useReduxContext(...)' because of its null value

Angular is failing to show any data on the display, despite there being no apparent errors

How come ngOnChange is unable to detect changes in @Input elements when ngOnDetect is able to do so?

Utilize nextjs-Sourcecode to customize

Creating a TypeScript schema with nested maps and arrays using Dynamoose

Encountered an error trying to access '0' property of an undefined object when iterating through data in angular framework

Create a TypeScript function that can be called and has an extended prototype definition

Combining the powers of Nextjs and Vue