🐩

Next.jsのApp Routerでコンポーネント管理する。

2023/10/03に公開

Next.js

ここで言うコンポーネントとはheader とかfooterとかhtmlの表示部品のことになります。とりあえずですが以下のように3分割します。layout.tsxでのコンポーネントの使用の仕方の説明になります。

header.tsx
footer.tsx
main.tsx

まずはテンプレート作成します。

create-next-appから作成します。

npx create-next-app --typescript

設問設定は以下となります。今回はimport aliasをデフォルトで使いますので
Would you like to customize the default import alias?をYesにします。

質問	入力内容
√ What is your project named?	app-router-components
√ Would you like to use ESLint?	Yes
√ Would you like to use Tailwind CSS?	Yes
√ Would you like to use `src/` directory?	Yes
√ Would you like to use App Router? (recommended)	Yes
√ Would you like to customize the default import alias?	Yes
√ What import alias would you like configured?	@/*
Creating a new Next.js app in C:\task\src\nextjs\app-router-components.

touch(shell)もしくは、new-item(powershell)で空ファイルを作っていきます。

app-router-component/src/app

cd app-router-component/src/app
md component
cd component
touch header.tsx,footer.tsx,main.tsx

以下のようなディレクトリ構成になります。フッダファイルとヘッダファイル、メインファイルの3つに分割します。

src/app/
    │   favicon.ico
    │   globals.css
    │   layout.tsx
    │   page.tsx
    └─components/
        footer.tsx
        header.tsx
        main.tsx

できあがりは以下のようになります。

完成図

tailwindcssのデフォルト値にしておきます

src/spp/globals.css

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

src/app/layout.tsx

import "./globals.css";
export const metadata = {
  title: "app-routerテストページ",
  description: "Next.jsのApp Routerでコンポーネント管理する",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body className="">{children}</body>
    </html>
  );
}

src/app/page.tsx

"use client"
import { useRouter } from 'next/navigation'
import Link from 'next/link'

//設定で使用したAliasを使っています。../components/headerと同じです。
import Header from '@components/header'
import Main from '@components/main'
import Footer from '@components/footer'


export default function PostPage() {
  const router = useRouter()
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )
}

src/app/component/main.tsx

import Link from 'next/link'
export default function Main() {
  return (
          <div className="flex justify-center bg-gray-100 h-40 pt-16">Main</div>
          )
}

src/app/component/header.tsx

import Link from 'next/link'
export default function Header() {
  return (
    <header className='flex justify-center bg-slate-50 p-6'>
     header
    </header>
  )
}

src/app/component/footer.tsx

import Link from 'next/link'
export default function Footer() {
  return (
<footer className='flex justify-center bg-slate-50 p-6'>
 footer
</footer>
  )
}

httpサーバを起動させて確認します。

npm run dev

Discussion