Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

Next.js 的 "_document.js" 檔案使用紀錄

我專案都快成型了,老實講這個 document.js 還真的沒什麼修改到,秉持著自己專案內不能有一丁點自己不懂的東西的想法,來探探這個底線 document.js 是個什麼玩意兒。

Next.js 有 _app.js_document.js 這兩個比較特別的頁面元件,其中 _app.js 比較好理解,它就是在做一些全局的配置,像是 Layout、Meta Tags 等設置。

_document.js 則是在定製你的基底 HTML 檔案結構,最基本的預設配置如下:

1import Document, { Html, Head, Main, NextScript } from 'next/document';
2
3class MyDocument extends Document {
4  render() {
5    return (
6      <Html>
7        <Head />
8        <body>
9          <Main />
10          <NextScript />
11        </body>
12      </Html>
13    );
14  }
15}
16
17export default MyDocument;
18

你可以在 Document 設置文件的語系(lang),或是新增一個 #overlaydiv 元素,方便之後使用 React Portal 製作 Modal 元件時使用。