Next.js App Router가 업데이트되며 이전에 보았던 강의도 추가적인 업데이트가 올라와서 해당 강의를 수강하며 App Router가 되면서 변경된 사항을 정리해보려한다.
# route 방식 변경
기존 pages/에서 app/ 폴더로 바뀌고, page.js, layout.js 등의 파일 이름으로 고정. 경로는 이제 무조건 폴더를 만들어 설정해야한다. SvelteKit과 비슷해진 느낌.
# 동적 경로
props.params에 접근해 slug 이름에 따라 params.slug 처럼 접근하면 된다.
# 클라이언트 실행
App Router로 변경되며 기본적으로 서버 컴포넌트가 되었다. 컴포넌트를 클라이언트 실행하기 위해서는 파일의 위에 "use client"; 를 적어주면 된다.
이런 서버 컴포넌트의 장점으로는 useEffect로 데이터를 가져오는 것이 아닌 바로 컴포넌트 안에서 가져오거나 할 수 있다. 그러나 백엔드가 외부에 따로 있는 경우에는...딱히
# Server Action
React의 기능으로 form action에 "use server"를 명시해 Server Action을 사용할 수 있다.
# 로딩
loading.js나 Suspense가 추가된듯? 리엑트 자체 기능들을 많이 활용하려는 것 같다.
# 캐싱, 페이지 재생성 하기
App Router로 오면서 더욱더 공격적인 페이지 캐싱이 진행된다. 캐싱된 페이지를 업데이트 하기 위해 revalidatePath("/pathname") 처럼 path를 지정하여 재생성 가능하다. 하위의 path도 같이 재생성 하려면 revalidatePath("/pathname", "layout") 과 같이 지정해준다.
# Head 정적 메타데이터 제공하기
메타데이터를 지정하기 위해서 layout.js 파일에 에약되어 있는 이름인 metadata라는 이름으로 dict를 만들어 export 해야한다.
이때 page metadata -> layout metadata -> root layout metadata 우선도 순으로 적용된다.
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
# 동적 메타데이터 제공하기
export async function generateMetadata()를 정의해 제공할 수 있다.
해당함수는 page가 받는것과 같은 props를 받고, 적당히 처리한 후 metadata dict를 return해주면 된다.
아래는 강의가 아닌 별개로 정리해 본 것.
# fetch 사용을 권장
Next.js에서 fetch를 확장해서 캐시 기능등을 제공하고 있기에, axios등을 사용한다면 따로 캐싱을 해주는 등 비효율이 있어 fetch 사용을 권장한다.
추가 메모
https://velog.io/@heer/Next.js-App-Router-Free-Course-6
https://blog.deercorp.com/next-js-app-router-and-fetch-library/
