Next.js の App Directory を使用して開発をしていきます。
pages フォルダ削除
デフォルトで作成されているpagesフォルダを削除します。
App Directory では基本的にはpagesフォルダは使用しません。
後で API を使用するときにのみ使用します。
app フォルダ作成
appフォルダを作成し、page.tsxファイルを作成します。
App Directory ではpage.tsxファイルがルートファイルになります。
Next.js 13 の App Directory は、アプリケーションのコードを組織的に管理するための機能です。
これには、サーバーコンポーネントとクライアントサイドコンポーネントの 2 つのタイプがあります。
デフォルトではサーバーコンポーネントとなります。
クライアントコンポーネントにする場合は、use clientと記載します。
サーバーコンポーネント
サーバーコンポーネントは、サーバー側で実行されるコンポーネントであり、Next.js のサーバーサイドレンダリング(SSR)によって生成される HTML を構築するために使用されます。
- サーバーサイドレンダリング(SSR)による HTML の生成
- データを取得し、サーバーサイドで処理する
- クッキーやセッションなどの HTTP リクエストに対する認証/認可のロジックを実装
クライアントコンポーネント
クライアントコンポーネントは、ブラウザ上で実行されるコンポーネントであり、アプリケーションの UI を構築するために使用します。
- ブラウザ上の JavaScript を実行して、動的な UI を生成
- ブラウザ上のイベントを処理し、アプリケーションの振る舞いを変更
- ブラウザ上の API を使用し、アプリケーションのデータを取得する
- クライアントサイドのライブラリやフレームワークを使用する
メインページ
app/page.tsx
// メインページ
const Page = () => {
return (
<div className="h-full">
<div>メインページ</div>
</div>
)
}
export default Page
layout
レイアウトを作成します。
レイアウトは全ページ共通のコンポーネントです。
page.tsxと同じ階層にlayout.tsxファイルを配置すると、その階層以下のディレクトリで共通のコンポーネントになります。
全ページ共通のナビゲーションやサイドバーなどはレイアウトファイルに記載していきます。
app フォルダにlayout.tsxを作成します。
app/layout.tsx
import '../styles/globals.css'
import Navigation from './components/navigation'
// レイアウト
const RootLayout = async ({ children }: { children: React.ReactNode }) => {
return (
<html>
<body>
<div className="flex flex-col min-h-screen bg-[#1C1C1C]">
<Navigation />
<main className="flex-1 container max-w-[512px] mx-auto px-2 py-10">{children}</main>
<footer className="py-5 border-t border-gray-600">
<div className="text-center text-sm text-white">
Copyright © All rights reserved | FullStackChannel
</div>
</footer>
</div>
</body>
</html>
)
}
export default RootLayout
Navigation
ナビゲーションを作成します。
components フォルダを作成し、navigation.tsxファイルを作成します。
ナビゲーションはクライアントコンポーネントとします。
ナビゲーションに画像生成ボタンを作成しておきます。
app/components/navigation.tsx
'use client'
import Link from 'next/link'
// ナビゲーション
const Navigation = () => {
return (
<header className="border-b border-gray-600 py-5">
<div className="container max-w-screen-xl mx-auto relative flex justify-center items-center">
<Link href="/" className=" font-bold text-xl cursor-pointer text-white">
FullStackChannel
</Link>
<div className="absolute right-5">
<Link href="post/new">
<div className="text-white bg-yellow-500 hover:brightness-110 rounded py-1 px-8">
画像生成
</div>
</Link>
</div>
</div>
</header>
)
}
export default Navigation
head
ヘッダーを作成します。
ヘッダーも全ページ共通のコンポーネントになります。
app フォルダにhead.tsxを作成します。
app/head.tsx
// ヘッダー
const Head = () => {
return (
<>
<title>Image Generation</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="description" content="Image Generation" />
<link rel="icon" href="/favicon.ico" />
</>
)
}
export default Head
確認
トップページが表示されることを確認します。
npm run dev
