次のヘッドタグを編集する方法.js
3604 ワード
いくつかのリンクやスクリプトのタグを頭に追加しますか?
この投稿では、ヘッドタグの内容を編集する方法を示します.
次に.JS私たちはデフォルト
ファイル
Renderメソッドで、アプリケーションツリー全体の構造を返します.ここにUIまたはビジネスロジックを置かないでください.
この例では、ヘッドタグの間に、Googleタグにリンクタグを置きました.
この投稿では、ヘッドタグの内容を編集する方法を示します.
次に.JS私たちはデフォルト
Document
をオーバーライドすることによってそれを行うことができますファイル
pages/_document.js
を作成し、Document
クラスを拡張します.Renderメソッドで、アプリケーションツリー全体の構造を返します.ここにUIまたはビジネスロジックを置かないでください.
この例では、ヘッドタグの間に、Googleタグにリンクタグを置きました.
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
それだ!Reference
この問題について(次のヘッドタグを編集する方法.js), 我々は、より多くの情報をここで見つけました https://dev.to/adambaialiev/how-to-edit-the-head-tag-in-next-js-2f39テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol