Next.js
Tailwind CSS
TypeScript

Next.js（TypeScript・TailwindCSS）でフッターを追加する

フッターコンポーネントを作成します。componentsディレクトリを作成し、その中にFooter.tsxファイルを追加します

#1. フッターコンポーネントの作成

フッターコンポーネントを作成します。componentsディレクトリを作成し、その中にFooter.tsxファイルを追加します。

mkdir components
touch components/Footer.tsx

components/Footer.tsxに以下のコードを追加します。

// components/Footer.tsx
import React from 'react';

const Footer: React.FC = () => {
  return (
    <footer className="bg-gray-800 text-white py-4">
      <div className="container mx-auto text-center">
        <p>&copy; {new Date().getFullYear()} My Next.js App. All rights reserved.</p>
      </div>
    </footer>
  );
};

export default Footer;

#2. フッターをレイアウトに追加

次に、layoutsディレクトリを作成し、MainLayout.tsxファイルを追加します。

mkdir layouts
touch layouts/MainLayout.tsx

layouts/MainLayout.tsxに以下のコードを追加します。

// layouts/MainLayout.tsx
import React from 'react';
import Footer from '../components/Footer';

type MainLayoutProps = {
  children: React.ReactNode;
};

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <main className="flex-grow">{children}</main>
      <Footer />
    </div>
  );
};

export default MainLayout;

#3. ページコンポーネントでレイアウトを使用

作成したレイアウトコンポーネントを各ページで使用します。例えば、pages/index.tsxで以下のようにします。

// pages/index.tsx
import React from 'react';
import MainLayout from '../layouts/MainLayout';

const Home: React.FC = () => {
  return (
    <MainLayout>
      <h1 className="text-center text-2xl mt-10">Welcome to My Next.js App</h1>
      {/* 他のコンテンツ */}
    </MainLayout>
  );
};

export default Home;

#4. アプリケーションを起動して確認

アプリケーションを起動して、フッターが正しく表示されることを確認します。

npm run dev
# または
yarn dev

ブラウザで http://localhost:3000 にアクセスし、ページの下部にフッターが表示されていることを確認してください。

#まとめ

これで、Next.js、TypeScript、TailwindCSSを使用して共通のフッターコンポーネントを作成し、全ページに適用する方法が分かりました。TailwindCSSを使用することで、簡単にスタイルを適用できます。

タグ一覧