(next.js) 청바지 개발 프로젝트 생성

by


레이아웃 헤더의 각 구성 요소에 대한 이미지 차이 지정

페이지에서 레이아웃 구성요소를 사용하는 경우 {home ? () : 보다 ? () : () } ③을 사용하여 코드를 단순화합니다.

componentet/Layout.js

<Head>
        <link rel="icon" href="http://judith-hopps.favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/리진스.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (vue ? (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/뷰진스.jpg"
                className={utilStyles.borderCircle}
                height={400}
                width={400}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.heading2Xl}>
                뷰진스
            </h2>
          </>
        ) : angular ? (
            <>
              <Link href="/">
                <Image
                  priority
                  src="/images/앵진스.jpg"
                  className={utilStyles.borderCircle}
                  height={400}
                  width={400}
                  alt=""
                />
              </Link>
              <h2 className={utilStyles.heading2Xl}>
                  앵진스
              </h2>
            </>
          ) :(
            <>
              <Link href="/">
                <Image
                  priority
                  src="/images/h진스.jpg"
                  className={utilStyles.borderCircle}
                  height={400}
                  width={400}
                  alt=""
                />
              </Link>
              <h2 className={utilStyles.heading2Xl}>
                  h진스
              </h2>
            </>
          )  ) }
      </header>

'추천 관련글,