프로젝트 with next.js 13 #1

next.js 13버전이랑 이런저런 새로운 것들을 같이 써보고 싶어서 뚝딱뚝딱 삽질하며 써보기

Next.js 13에서 바뀐 것

1) app directory

/app에서는 서버 컴포넌트가 dafault이다.
(현재) pages directory와 app directory를 같이 사용할 수는 있지만,
경로가 중복되는 경우 에러가 발생한다.

client component vs server component

서버 컴포넌트를 사용하면
1) server infrastructure를 더 잘 이용할 수 있다.
2) 성능에 유리하다.

• 브라우저에 다운로드되지 않고 서버에서 미리 렌더링 된 static content를 전달한다. 패키지로 인한 종속성 등 클라이언트 js 번들 크기에 영향을 주지 않는다.

언제 어떤 컴포넌트를 사용할지는 공식문서를 참고

_app.tsx와 _document.tsx가 app/layout.tsx로 변경되었다.
app/layout.tsx는 app 디렉토리 안의 파일에만 적용되는 것 같다.
/app/page.tsx가 처음 진입하는 경로이다.

서버 컴포넌트에서는 useState/useEffect를 사용할 수 없다. 클라이언트 컴포넌트로 만들려면 가장 상단에 ‘use client’를 선언해야 한다.

2) Link 컴포넌트

Link 컴포넌트는 HTML <a> 요소를 확장한 리액트 컴포넌트로, 클라이언트에서 navigation 위해 사용했다. 기존에는 <a> 태그를 <Link> 태그로 감쌌는데 이제는 레거시가 되었다.

The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.

<Link href="/">HOME</Link>
그냥 이렇게 사용해주면 된다.