Create T3 App で作成された layout.tsxのコードを読んでみる

はじめに

kossyです。やはり人間には絶対にやらなければならないというプレッシャーが必要だと感じています。

今日は Create T3 App で作成された layout.tsxのコードを読んでみようと思います。

概要

npm create t3-app@latest して、 App Router を有効にすると、src/app/layout.tsx というファイルが作成されます。

このファイルは、App Routerの機能で、自動でどのコンポーネントでも呼ばれるファイルになっています。

公式ドキュメントは以下です。

nextjs.org

コードリーディング

ChatGPTの助けを借りながら、一行ずつ読み進めていきましょう。

import

import "~/styles/globals.css";

import { Inter } from "next/font/google";

npm create t3-app@latest した時の、「Will you be using Tailwind CSS for styling?」に Yesと答えると、 globals.css がimportされます。

globals.cssの中身は以下で、

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindを使用するための定義が行われています。

import { Inter } from "next/font/google"; は InterというGoogleFontをimportしています。

fonts.google.com

Inter

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

フォントの設定オプションをオブジェクトとして渡しており、

subsets: ["latin"]

上記はフォントの文字セットを指定し、

variable: "--font-sans"

上記はフォントの変数名を設定しています。 ここで指定された"--font-sans"は、CSS変数としてフォントを参照する際に使用され、 この変数をCSSファイル内で使用することで、Interフォントをページ上で使用できるようになります。

metadata

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

HTMLのメタデータを定義している箇所です。layout.tsxファイル内ではどこからも参照されていませんが、titleを書き換えるときちんと反映されます。

nextjs.org

before

after

// Update T3 App に書き換えて保存
export const metadata = {
  title: "Update T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

あとがき

zero config を謳っているだけあって、今回紹介した箇所以外にも隠蔽されているロジックが多くて解読がしんどいんですが、

引き続きじっくり読んでいきたいと思います。