Next.js 固定ページ NotionBlog

2023-05-22

Next.js

作成する固定ページ

About, Projects

pages > about.tsx, projects.tsx 作成

参考

https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg#pages%2Fディレクトリで、新しいページを追加しよう

about.tsx

基本構造

import Head from "next/head";
import React from "react";
import Image from "next/image";
import profilePic from "../public/images/jpgs/my_avatar.jpg";

export default function About() {
    return (
        <div id='canvasParent' className="container w-full h-full mx-auto">
        <Head>
            <title>Notion-Blog | About Page</title>
            <meta name="description" content="Generated by create next app" />
        </Head>
        <main className="w-4/5 m-auto">
            <h1 className="text-5xl font-medium text-center mb-16">About Page</h1>
            <div className="relative z-0 grid w-full grid-cols-8 gap-8 sm:gap-16 mb-16">
                
                <div className="col-span-8 md:col-span-4 order-2 md:order-none flex flex-col items-start justify-start">
                    <h2 className="mb-4 text-xl font-bold uppercase">Biography</h2>
                    <p className="font-medium">
                        Hi, I&apos;m KzmAoki, a web developer with a
                        passion for creating beautiful, functional, and user-centered
                        digital experiences.
                        I am always looking for new and innovative ways to bring my
                        clients&apos; visions to life.
                    </p>
                </div>

                <div className="col-span-8 md:col-span-4 relative h-max p-8 rounded-2xl border-2 border-soliid border-black bg-white dark:border-white dark:bg-black">
                    <div className="absolute top-2 -right-4 -z-10 w-[102%] h-[102%] rounded-[1.5rem] bg-black dark:bg-white" />
                    <Image
                        src={profilePic}
                        alt="KzmAoki"
                        className="w-full h-auto rounded-2xl"
                        priority // 表示を優先
                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    />
                </div>
            </div>
        </main>
        </div>
    );
};

profilePicの親要素下にdivで装飾する際に先祖が背景色持っている場合親要素の親要素に対してrelative, z-0 を指定する。

親要素にはz指定しない

参考

https://shu-sait.com/z-index-koyouso-shita/

grid, grid-cols-num, gap-num, col-span-namを使用してレスポンシブ対応させつつ装飾

TOP PAGE