[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【ふるさと納税】BUFFALO/バッファロー ポータブルSSD TypeA&am...
価格:44,000円(税込、送料無料) (2023/5/26時点)


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

概要

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;

【1つ新しい記事】

【1つ古い記事】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です