Zenn
🐻‍❄️

Next.js(PageRouter)の_app.tsxでグローバルスタイルを適用する方法。Emotionも使います！

2024/03/14に公開
Next.js
emotion
tech

前置き

入社3ヶ月目の駆け出しフロントエンドエンジニアによる備忘録です。
今回は、$ create-next-appで作成した Next.js の PageRouter についての記事となります。

◎ 今回やりたいこと

  1. 自前で用意した reset.css を一発で全ページに反映させたい。
  2. next/font/google でインポートした Noto Sans JP を一発でグローバルスタイルに適用したい。

◎ 使用環境と技術

項目 選択した技術 バージョン
フレームワーク Next.js 14.1.3
言語 TypeScript ^5
スタイリング Emotion 11.11.4

◎ さっそくやってみよう

reset.css を一発で全ページに反映させる

まずは、reset.css を /src/styles/reset.css という構造で配置します。
次に _app.tsx の先頭部分に下記のコードを追加し、reset.css をインポートします。

/src/pages/_app.tsx
import "@/styles/reset.css";

これで reset.css をプロジェクト全体のグローバルスタイルとして適用できました。
思ったより簡単でした。

Noto Sans JP を一発でグローバルスタイルに適用する

まずは Noto Sans JP をインポートしていきます。
_app.tsx の先頭に下記のコードを追加して下さい。

/src/pages/_app.tsx
import { Noto_Sans_JP } from 'next/font/google';

この行では、Next.js の機能を使って Google Fonts から Noto Sans JP という日本語フォントをインポートしています。 next/font/google は Next.js が提供する Google Fonts を扱うためのモジュールです。

次にインポートした Noto_Sans_JP 関数を実行し、その設定を行っていきます。

/src/pages/_app.tsx
const notoSansJP = Noto_Sans_JP({
  subsets: ['latin']
});

フォントの設定を変更したい場合は、この Noto_Sans_JP 関数の引数を変更して下さい。

続いて Emotion を _app.tsx にインポートします。
まず _app.tsx の先頭部分に下記のコードを追加して下さい。

/src/pages/_app.tsx
// ---- Emotion ----
/** @jsxImportSource @emotion/react */
import { css, Global } from '@emotion/react';

次に _app.tsx の中にある APP コンポーネントに、先程 Emotion で導入した Grobal コンポーネントを追加して下さい。そこに同じく Emotion の機能を使って notoSansJP を埋め込みます。

/src/pages/_app.tsx
 export default function App({ Component, pageProps }: AppProps) {
   return (
    <>
      {/* Globalコンポーネントでは、cssではなくstylesを使用する必要がある */}
+      <Global
+        styles={css`
+            body {
+                font-family: ${notoSansJP.style.fontFamily};
+            }
+        `}
+      />
      <Component {...pageProps} />
    </>
   );
 }

これで Next.js プロジェクト全体に Noto Sans JP を導入することができました！

◎ 完成後のファイル

./src/pages/_app.tsx
import type { AppProps } from 'next/app';
// --- resetCSS ---
import '@/styles/reset.css';
// ---- Emotion ----
/** @jsxImportSource @emotion/react */
import { css, Global } from '@emotion/react';
// ---- Googleフォント ----
import { Noto_Sans_JP } from 'next/font/google';



const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
});



export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global
        styles={css`
          body {
            font-family: ${notoSansJP.style.fontFamily};
          }
        `}
      />
      <Component {...pageProps} />
    </>
  );
}

参考

https://emotion.sh/docs/globals

Discussion