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
),或是新增一個 #overlay
的 div
元素,方便之後使用 React Portal 製作 Modal 元件時使用。