-
[next.js] 개발진스 프로젝트 생성하기React/next.js 2023. 3. 22. 19:46반응형
레이아웃 헤더에서 컴포넌트별 이미지 차이 주기
페이지에서 레이아웃 구성요소 사용시 `처럼 사용하여 {home ? () : 뷰 ? () : () } ③을 사용해서 코드 간편화
componenet/Layout.js
<Head> <link rel="icon" href="/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>반응형'React > next.js' 카테고리의 다른 글
[next.js] CSS - 레이아웃, 모듈, 전역 CSS (0) 2023.03.22 [next.js] 메타데이터 - title, script (0) 2023.03.22 [next.js] next.js 사진 (0) 2023.03.22 [next.js] 메뉴얼 - 설치, 세팅, 라우팅 (0) 2023.03.22 [next.js] 적용 방식 - 컴파일, 축소, 번들링, 빌드, 코드분할, 런타임, 렌더링 (0) 2023.03.22
