ゴール

https://minimal-nextjs-portfolio-website.vercel.app/ 上記URLのFooter

• 基本的な構造をコーディングする

components > Footer > Footer.tsx

import React from "react";
import Link from "next/link";

const Footer = () => {
  return (
    <footer>
      <div>
        <span>{new Date().getFullYear()} &copy; All Right Reserved.</span>
      </div>
    </footer>
  );
};

export default Footer;

components > Layout.tsx

import React from "react";
import { Navbar } from "./Navbar/Navbar";
import Footer from "./Footer/Footer"; // 追加

interface MyComponentProps {
  children: React.ReactNode;
  // add other prop types here
}

export const Layout = ({ children }: MyComponentProps) => {
  return (
    <div className="dark:bg-black dark:text-white transition-colors duration-500">
      <Navbar />
      {children}
      <Footer /> // 追加
    </div>
  );
}

• CSS

import React from "react";
import Link from "next/link";

const Footer = () => {
  return (
    <footer className="w-full border-t-2 border-solid border-black font-medium text-lg dark:border-white sm:text-base">
      <div className="flex justify-center items-center py-8">
        <span>{new Date().getFullYear()} KzmAoki &copy; All Right Reserved.</span>
      </div>
    </footer>
  );
};

export default Footer;

TOP PAGE