Next.js 14でTodoアプリを作る – 6.フロントの事前準備

投稿日：2024年03月14日

更新日：2024年03月14日

投稿者：HIROKI CHIYODA

不要なコードを削除

page.tsxの<main>の中を削除します。
また<main>のclassNameの中もいったん削除します。

export default function Home() {
  return <main className=""></main>;
}

globals.cssのTailwind CSSの設定以外は削除します。

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

フォントの設定

  import type { Metadata } from "next";
- import { Inter } from "next/font/google";
+ import { Noto_Sans_JP } from "next/font/google";
  import "./globals.css";
  
- const inter = Inter({ subsets: ["latin"] });
+ const notoSansJP = Noto_Sans_JP({
+   subsets: ["latin"],
+   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+ });
  
  export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
  };
  
  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
-     <html lang="en">
+     <html lang="ja">
-       <body className={inter.className}>{children}</body>
+       <body className={notoSansJP.className}>{children}</body>
      </html>
    );
  }

メタデータの設定

  import type { Metadata } from "next";
  import { Noto_Sans_JP } from "next/font/google";
  import "./globals.css";
  
　 const notoSansJP = Noto_Sans_JP({
　   subsets: ["latin"],
　   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
　 });
  
  export const metadata: Metadata = {
-   title: "Create Next App",
+   title: "Todo App",
-   description: "Generated by create next app",
+   description: "Generated by create todo app",
  };
  
  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
      <html lang="ja">
        <body className={notoSansJP.className}>{children}</body>
      </html>
    );
  }