Next.js 정의와 13 변경 사항

hodu·2023년 2월 26일

next.js 개발 공부

next.js 강의는 두번째 강의여서 중첩되는 내용이 많다.
그래서 앞에서 다뤘던 내용도 복습차 보았지만 정리하지 않았고,
새로운 내용 위주로 정리하였다.

Next.js

React.js는 JavaScript의 라이브러리인데
이 라이브러리의 프레임워크인 Next.js이다.

Next.JS는 프로덕션용 React 프레임워크이다.
React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있다.

다른 말로는 React.js는 풀스텍 프레임 워크라고 부르기도 한다.

라이브러리와 프레임워크의 차이는 프레임워크가 더 많은 기능을 가지고 있다.
또한 파일을 어떻게 작성해야하는지 명확한 기준들이 있다.

React 상에 구축되어 React에 직접 추가해야하는 다양한 핵심기능을 추가해 주어
React를 강화했다.

라우팅 및 다양한 기능들을 추가해준다.
큰 규모의 앱에서 자주 발생하는 문제를 실제 프로덕션용 React 앱의 구축에서 보편적으로
발생하는 문제점들을 해결하기 위해 서드 파티 라이브러리를 사용하는 빈도를 줄어들게한다.

Next.js 핵심기능

SSR

SEO 기능 개선

React도 이러한 기능들이 내장되어있지만 적용하기 많이 번거롭다.

파일 기반 라우팅

풀스택 React.app

백엔드 api를 리액트 React 프로젝트로 추가할 수 있다.

useRouter를 이용하여 path name을 알 수 있다.

const router = useRouter();


console.log(router);
console.log(router.pathname);
console.log(router.query);

를 사용하면 각종 url 관련된 정보들을 얻을 수 있다.

중첩된 동적 라우터를 활용하여 경로를 구축 할 수 있다.

[id]라는 폴더를 만들면 동적으로 작동하고,
그 안에 index를 만들면 id의 메인 페이지가 되고,
[wordid]로 js 파일을 만들면 동적라우팅에 중첩으로 동적 라우팅이 가능하여
세분화할 수 있다.

Next 13 변경사항

-> 즉, 기존 12 버전에서 /pages/todo.tsx 파일이 /todo 라우팅이 되었다면 이번에 나온 13 버전에서는 무조건 /app/todo/page.tsx 파일이라고 만들어야 합니다.

즉, todo까지가 폴더 방식 라우팅이고 그 라우팅의 기본이 바로 page.tsx라는 뜻입니다.

기존 웹 표준인 index.tsx 파일을 안 쓴 거는 조금 의아한데요. 어쩔 수 없죠.

그리고 라우팅이 되는 폴더에는 여러 가지 예약된 파일 이름이 있는데요.

위 그림에서처럼 자동으로 만들어진 layout.tsx파일과 head.tsx파일도 있고, 그 외 아래 그림처럼 여러 가지가 있습니다.

13부터는 폴더 기반으로 바뀌었기 때문에 파일라우팅은 불가하다

참고
https://mycodings.fly.dev/blog/2022-11-14-nextjs-13-first-look-and-layout

catch-all 라우트 추가하기

blog라는 폴더 아래에 [...slug]라는 폴더를 만들어서
useRouter로 쿼리를 확인하려 하였다.

라는 오류가 떴는데

Next 13 변경사항

import { useRouter } from 'next/router';

기존의 이 방식으로 쿼리스트링을 확인했는데

13부터는

import {
  usePathname,
  useRouter,
  useSearchParams,
  useSelectedLayoutSegment,
  useSelectedLayoutSegments,
  redirect,  
  notFound,
} from 'next/navigation';

방식으로 변경되었다.

https://velog.io/@rrrrrrrrrrrocky/Next.js-13-nextnavigation

양식에 맞춰서 사용하였는데 오류가 발생하였다.

https://nextjs.org/docs/messages/react-client-hook-in-server-component
참고하여 본다면 React클라이언트 후크를 사용하면
'use client'를 파일상단에 추가하면 된다.

쿼리스트링을 받고 싶었는데 3개를 전부 써봐도 나오지 않았다.

구글 검색을 통해 이러한 방법을 찾았다.
https://beta.nextjs.org/docs/api-reference/file-conventions/page

app/blog/[slug]/page.tsx

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}) {
  return <h1>My Page</h1>;
}