⑩app/layout.tsxの編集

Cursor

全ページ共通のレイアウトを決めるapp/layout.tsxでは以下の項目を指定する

・　フォント

・　サイトタイトルとDescription

・　ヘッダーとフッターとChildren のレイアウト

import type { Metadata } from "next";
import { Fredoka } from "next/font/google";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { LeftSidebar } from "@/components/left-sidebar";
import { RightSidebar } from "@/components/right-sidebar";
import "./globals.css";


const sans = Fredoka({
  variable: "--font-fredoka",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

#####
google fontをインポートして読み込んでいる
デフォルトだとNoto_Sans_JPやShippori _Minchoを読み込むが、
英語で記事を書くなら英語フォントに変えること
#####


export const metadata: Metadata = {
  title: {
    default: "JP MONEY",
    template: "%s | JP MONEY",
  },
  description: "Share tips on Japanese taxes and personal finance",
};


#####
Next.jsにはMetadataという型があり、サイトのタイトルや説明文を設定するのに使う
それをimport type { Metadata } from "next"; でインポートし、
export const metadata: Metadata = で設定する

template: "%s | JP MONEY"の「％s」には、
記事ページ側で　title: "記事タイトル"　と設定したら、
記事タイトル | JP MONEY というタイトルになる
#####



export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html
      lang="en"
      className={`${sans.variable} ${serif.variable} h-full antialiased`}
    >
      <body className="flex min-h-full flex-col bg-background font-sans text-foreground">
        <SiteHeader />
        <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-8 px-6 py-12 lg:grid-cols-[220px_minmax(0,1fr)_220px]">
          <aside><LeftSidebar /></aside>
          <main className="w-full flex-1 px-6 py-12">{children}</main>
          <aside><RightSidebar /></aside>
        </div>
        <SiteFooter />
      </body>
    </html>
  );
}


#####
ヘッダー（SiteHeader）とフッター（SiteFooter）が全ページの共通部分としてあり
その間に挟まっている{children}がページごとに入れ替わる部分を示す
posts/welcome.mdxの内容が{children}に入る

<SiteHeader />にはcomponents/site-header.tsxの内容が表示される

海外にいる外国人にサイトを見てもらいたいなら、
<html lang="en">にすべき
また、<html className={`${sans.variable}`}>として、
HTMLタグにフォントクラスをつけること

パソコンでは3カラム、スマホでは1カラムのレスポンシブデザインにしたいので、
<main className＞の"mx-auto max-w-3xl"は
メイン部分の最大幅をかなり狭くする設定なので外す
<main>の周りに<LeftSidebar />と<RightSidebar />をつけてから、
import { LeftSidebar } from "@/components/left-sidebar";
import { RightSidebar } from "@/components/right-sidebar";
とする
最後に、<div className="省略">で3列、1列のレスポンシブを作る
#####
BACK