[Next.js] CDN版のCSSやJavaScriptを使う方法

管理者

2年前

概要
linkタグ
scriptタグ
関連書籍

概要

Next.jsで外部のCSSやJavaScriptを使う場合、通常はnpmパッケージをインストールしたものをimportする。
何らかの事情でCDN版を使いたい場合は、linkタグやscriptタグをNext.jsのルールに則った場所に記述する必要がある。

linkタグ

pages/_document.js（拡張子はjsx, ts, tsxなど環境に依存）内に記述する。

import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="ja">
      <title>Test</title>
      <meta name="description" content="Testです。" />
      <meta name="keyword" content="Test" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

scriptタグ

bodyタグ内に含める場合、pages/_app.js（拡張子はjsx, ts, tsxなど環境に依存）内に記述する。
※ headタグ内に含める場合は、pages/_document.js（拡張子はjsx, ts, tsxなど環境に依存）に記述する

import Script from 'next/script';

Const App = ({ Component, pageProps }) => {
  return (
    <>
      <Component {...pageProps} />
      <script
        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossOrigin="anonymous"
      />
    </>
}

export default App;

概要

linkタグ

scriptタグ

関連書籍