(Next.js) 베이직 기초

Next.js란

Next.js는 서버사이드 랜더링을 손쉽게 가능하게 하는 프레임워크이다

리엑트는 라이브러리이다. 즉, 개발자에게 유저 인터페이스를 만들기 위한 플랫폼을 만들어 주고 필요한 라이브러리를 가져다가 쓰게 하는 패키지이다
하지만 Next.js는 프레임워크로, 필요한 기능이나 내용들을 모두 미리 탑재하고 있고, 해당 프레임을 따르면서 개발을 하도록 설계되어 있다

Next.js의 장점

Next.js는 여러가지 강점을 가지고 있다

1. 쉬운 라우팅 : pages라고 하는 폴더 내부의 파일들을 라우팅으로 읽기 때문에 리엑트 때처럼 react-router-dom을 설치하고, 컴포넌트를 생성하고 할 필요가 없어진다.
   

2. 서버사이드 렌더링 : react는 자바스크립트 파일을 가져와서 id="root"인 요소에 DOM을 세팅하는 방식이기때문에 search engine이 해당 파일을 검색하기에 불리한 점이 있었다. 하지만 Next.js는 미리 해당 페이지를 서버에서 랜더링을 하고 가져오기 때문에 검색엔진 최적화에 도움이 된다.

3. Fullstack 디자인이 가능 : 리엑트에서는 서버사이드의 코드를 작성할 수 없다. 하지만 Next.js는 서버사이드 코드를 제작할 수가 있다. 이는 필요에 따라서 서버와 분리가 아닌 하나의 프로젝트로 서버에 관련한 요청을 작업할 수 있다는 의미가 된다.
   

4. 라우트 자동처리 기능 : 리엑트에는 없는 경로로 접근하는 경우 필요한 라우팅 처리를 따로 해줘야 한다. 하지만 Next.js는 이런 처리를 자동으로 해준다는 장점이 있다.
   

필요하다면 커스텀 페이지를 만들수도 있다(심지어 아주 쉽다). 단지 pages아래에 404라는 이름의 파일을 만들어주기만 하면 된다.

Next.js에서 param을 추출해야 할 경우

dynamic route는 [param].tsx 형태로 이루어진 파일로 동적인 라우팅 처리가 가능하다. 이때 param정보를 알고 싶다면 useRouter 훅을 이용하면 된다.

Dynamic path를 활용하는 방법 (with nested route)

예를들어, 클라이언트 아이디가 1인 사람의 포트폴리오 번호 3번에 해당하는 내용을 브라우저에 가져와야 할 때, url은 다음과 같을 것이다

localhost:3000/clients/1/3

이럴때, Next.js적으로 폴더를 나누어 라우팅을 해야 할 경우를 생각해보면 이러하다

1. clients 폴더가 있다
   2.clients 폴더 내에는 [clientId].tsx 와 같은 형태의 "폴더" 가 존재한다
2. 그 폴더 내부에는 [portfolioId].tsx 와 같은 "파일" 이 존재한다.

이런 방식으로 dynamic route를 형성할 수 있다.

note. 폴더 내에서 index라는 명명이 붙은 파일은 항상 그 폴더이름의 라우트로, []로 이루어진 파일은 다이나믹 라우트로 사용된다

Link vs a

리엑트와 동일한 이야기지만, Next.js에서도 역시나 마찬가지로 라우팅을 위해 특수한 컴포넌트 를 사용하길 권장한다
그 이유는, 태그로 라우팅을 처리하면 해당 경로의 도큐먼트 자체를 요청하여 새로 갈아끼우는 상황이 벌어지지만,
Link 컴포넌트를 사용하면 해당 라우트에서 필요한 js 파일만 가져오기 때문이다

여기에서, 우리는 next.js가 자동적으로 코드 스플리팅을 통해 필요할 때만 js를 로드한다는 것을 알 수 있다. 즉, 처음에 전부 다 js를 가져오는 것이 아니라 필요한 모듈들을 다 조각조각 나눈 후, 필요할 때만 가져오도록 설계되어 있는 것이다.

Link는 필요한 js 파일만 가져온다

a는 페이지 전체를 요청해버린다

router.push

다른 페이지로 이동해야 할 때, react router dom에서는 useNavigate을 이용해 호출한 함수에 경로를 넣어서 이동하였다.
Next.js 역시 비슷한 방법으로 하면 된다

참고로, router.replace메서드를 통해 라우팅을 했을 경우, 페이지 스텍에 현재 페이지를 이동하는 페이지로 교체해버리기 때문에 바로 이전의 페이지로는 돌아가지 못한다