⛳

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

2024/04/06に公開

Next.js

はじめに

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

フォーマッターを導入する

コードを整形するフォーマッターを追加しておきます。

bun add -D add -D prettier prettier-plugin-organize-imports
touch .prettierrc

設定を入れます

.prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "printWidth": 80,
  "bracketSpacing": true,
  "plugins": ["prettier-plugin-organize-imports"],
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "printWidth": 360
      }
    },
    {
      "files": ["*.css", "*.scss"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

これでフォーマッターの導入と設定は、とりあえずOK

ページを追加する

ページを追加するため、appディレクトリ配下にディレクトリを切ってファイルを作ります。

mkdir app/about && touch app/about/page.tsx
mkdir app/contact && touch app/contact/page.tsx

とりあえず適当にページ名を表示するようにします。

about/page.tsx

export default function Page() {
  return <div>about</div>
}

contact/page.tsx

export default function Page() {
  return <div>contact</div>
}

レイアウトページを修正します。

layout.tsx

import { cn } from '@/lib/utils'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Link from 'next/link'
import './globals.css'

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

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

const navItems = [
  { label: 'top', href: '/' },
  { label: 'about', href: '/about' },
  { label: 'contact', href: '/contact' },
]

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">
              {navItems.map((item) => (
                <li key={item.label}>
                  <Link href={item.href}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </nav>
        </header>
        {children}
        <footer className="bg-pink-100 container p-5 sticky top-full">
          <p>&copy; Kei Takahashi</p>
        </footer>
      </body>
    </html>
  )
}

表示して動作を確認します。ヘッダーメニューからAboutやContactのページ遷移できるようになりました。

ボタンコンポーネントを追加して差し替える

shadcnというとても便利なライブラリを使います。
以下URLある通りボタンコンポーネントを追加して、ヘッダーのメニューボタンを変更します。

bunx --bun shadcn-ui@latest add button

あとはこちらのボタンコンポーネントを呼び出して使います。

layout.tsx

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Link from 'next/link'
import './globals.css'

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

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

const navItems = [
  { label: 'top', href: '/' },
  { label: 'about', href: '/about' },
  { label: 'contact', href: '/contact' },
]

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">
            <ul className="flex gap-10">
              {navItems.map((item) => (
                <li key={item.label}>
                  <Button variant={'ghost'} asChild>
                    <Link href={item.href}>{item.label}</Link>
                  </Button>
                </li>
              ))}
            </ul>
          </nav>
        </header>
        {children}
        <footer className="bg-pink-100 container p-5 sticky top-full">
          <p>&copy; Kei Takahashi</p>
        </footer>
      </body>
    </html>
  )
}

さっそく画面を確認します。

カーソルをボタンへホバーすると色が変わるのがわかります。
（画像ではマウスカーソルはキャプチャできていないけど）

はじめに

フォーマッターを導入する

ページを追加する

ボタンコンポーネントを追加して差し替える

Discussion