⛳

最近アツいJavaScriptランタイム Bun を使ってNext.js&TailwindCSSを試す #2

2024/04/04に公開

JavaScript

はじめに

これの続きやっていきます。

フロントエンドつくる

UI部品を簡単に作りたい

Tailwindでゴリゴリつくるより、UIライブラリの恩恵を受けるのが良い。
そこで、shadcn/ui を利用する。
light/darkモード切り替える場合、Tailwindだとdark:text-whiteとか記述する必要がある。
shadcn/uiの場合は、そのような記述が基本的に不要（100%ではない）なので、とてもコード削減できる。

早速、セットアップする

bunx shadcn-ui@latest init
# 対話形式で設定を聞かれるので対応する

デフォルトページ消してレイアウトのベースをつくる

まずはホットリロードでコードを変更して保存すると画面に反映するよう立ち上げます。

bun dev

Next.jsのデフォルトページをとりあえず消します。

page.tsx

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

そしてレイアウト部分を作ります。
適当にヘッダーとフッターを用意してみます。

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";

const inter = Inter({ subsets: ["latin"] });

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="ja">
      <body className={cn(inter.className, "min-h-dvh")}>
        <header className="bg-indigo-100 container flex  h-16 items-center justify-between">
          <h1 className="font-bold">Logo</h1>
          <nav className="bg-gray-300 p-5">
            <ul className="flex gap-10">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
            </ul>
          </nav>
        </header>
        {children}
        <footer className="bg-pink-100 container p-5 sticky top-full">
          <p>&copy; Kei Takahashi</p>
        </footer>
      </body>
    </html>
  );
}

とりあえず、わかりやすいように領域別に色をつけた。
こんな感じに仕上がる。

ポイント解説

import

import { Inter } from "next/font/google";
Google FontsからInterフォントをインポート。Next.js 12以降で導入された機能で、フォントの最適化を簡単に行える。

import "./globals.css";
グローバルCSSファイルをインポートすることで、アプリ全体に適用されるスタイルを設定

import { cn } from "@/lib/utils";
クラス名を結合するためのヘルパー関数（cnは"classnames"の略であることが多い）

フォント設定

const inter = Inter({ subsets: ["latin"] });
Interフォントを初期化し、ラテン文字のサブセットを指定。必要な文字のみをロードすることでパフォーマンスを向上

レイアウトコンポーネント

<body className={cn(inter.className, "min-h-dvh")}>
cn関数を使用してinter.className（Interフォントのクラス名）と"min-h-dvh"を結合。
min-h-dvhを使う理由は以下の記事が参考になる。

おわりに

一旦、画面のレイアウトのベースだけを作成してみました。
今更ですが、フォーマッターの設定いれておけばよかった。

この記事が参考になった方は、ハートマーク、フォローよろしくお願いします！（なんちゃって◯ouTuber）