[Next.js] Image 컴포넌트 外 업데이트 (Next 13)

 

 

 

Next.js가 13으로 업그레이드 되면서 몇가지 변화가 생겼다

update release 에서도 확인이 가능한데,

내가 이번 프로젝트 작업을 하면서 변한 부분을 확인하자면,

 

참고로 현재 리액트, TS, Next, 테일윈드 를 사용 중.

 

1. Link

 

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

import Link from 'next/link'

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

 

기존에 링크 태그 안에 a 태그가 들어가는 방식이었는데,

이제는 링크 태그 단독으로 사용!

 

2. Layout

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

 

 

3. Image

Image 컴포넌트의 타입을 살펴보면 width 와 height는 숫자로만 받을 수 있다.

퍼센트 값 입력이 불가하다는 뜻이다.

또한 ObjectFit 이나 layout 속성도 사용이 불가능하다.

Image 컴포넌트의 타입에 지정되어있지 않기 때문.

 

그 해결 방법을 고민했는데

답은 의외로 간단했다.

 

fill=true

하게 되면 width, height 값 없이 사용이 가능.

 

 

참고사이트

https://velog.io/@yoosion030/Next.js-13-%EC%A0%95%EB%A6%AC-2#nextimage

Next.js 13 정리 - 2