今天來分享這個專案的切版製作過程。首先，我們分析了這個網站的布局，包括頁首和頁尾，這就是所謂的Layout。接著，我們將首頁的結構製作成元件。

• 在 src 目錄下建立一個 components 資料夾。
• 在 components 資料夾中，建立 Layouts/Basic 資料夾。
• Layouts/Basic 資料夾中，建立 AppHeader.tsx 和 AppFooter.tsx 兩個元件。

網頁頁首

import React from "react";
import Image from "next/image";
import Link from "next/link";
import logoutSvg from "@/../public/svg/logout.svg";
export default function AppHeader() {
  return (
    <div className=" flex justify-between bg-white mx-3 md:mx-16 ">
      <div className=" my-6">
        <Link href={"/"}>
          <Image alt="" src={"/Logo.svg"} width={150} height={50} />
        </Link>
      </div>

      <button className="btn my-10 bg-primary-200 border-none rounded-3xl text-white">
        <Link href={"/sign-in"}>
          <span className=" hidden md:block">註冊 / 登入</span>
        </Link>

        <span className=" md:hidden">
          <Image alt="" src={logoutSvg} />
        </span>
      </button>
    </div>
  );
}

頁尾

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

/** - 頁尾 */
export default function AppFooter() {
  return (
    <div className="bg-primary-300 pt-1 ">
      <footer className="md:flex justify-center items-start gap-3 mt-[72px]">
        <figure className="flex justify-center mb-12">
          <Image
            alt=""
            src={"footerLogo.svg"}
            width={150}
            height={150}
            className="mr-0 md:mr-36"
          />
        </figure>

        <div className="flex flex-col justify-center items-center md:mr-12">
          <button className="btn bg-primary-300 border-primary-100 text-primary-100  rounded-3xl">
            會員登入
          </button>
          <a href="" className="my-6 text-white">
            會員好評
          </a>
        </div>

        <div className="flex flex-col justify-center items-center md:mr-12">
          <button className="btn bg-primary-300 border-primary-100  text-primary-100 rounded-3xl">
            成為合作專家
          </button>
          <Link href="/parner" className="my-6 text-white">
            申請成為合作夥伴
          </Link>
          <a href="" className="my-6 text-white">
            合作夥伴儀錶板
          </a>
        </div>

        <div className="flex flex-col justify-center items-center md:mr-12">
          <button className="btn bg-primary-300 border-primary-100 text-primary-100  rounded-3xl">
            關於我們
          </button>
          <a href="" className="my-6 text-white">
            聯絡我們
          </a>
          <a href="" className="my-6 text-white">
            常見問題
          </a>
        </div>
        <div className="flex flex-col justify-center items-center">
          <Link
            href="/admin"
            className="btn bg-primary-300 border-primary-100 text-primary-100  rounded-3xl"
          >
            前往管理後台
          </Link>
        </div>
      </footer>

      <footer className="text-gray-200 text-center mt-16 pb-16">
             2024
      </footer>
    </div>
  );
}

上述可看到 Next.js 的 Link 標籤的用法與傳統的 HTML 標籤相似，都是用來跳轉頁面。只要設了對應的應用程式路由，Link 標籤就能實現頁面之間的跳轉。

明天來分享如何使用 tailwind配置主題色票