Next.js 시작 (CSR SSR, 설치, 라우팅)

요즘 프론트엔드 채용공고를 보면 Next.js를 공부한 지원자들을 우대하는 회사들을 많이 볼 수 있습니다.
Next.js는 항상 공부해야지 하다가.. 원티드 인턴십, 취업준비로 새로운 기술에 대한 공부를 미루게 되었는데 오늘부터 조금씩 공부해보려고 합니다!

🫡 Next.js 많이 쓰는 이유

• client-side rendering 말고 server-side rendering이 다시 유행하기 시작했습니다.

CSR(client-side rendering)

• 서버에서 비어있는 html을 내려주고 클라이언트에서 html에 필요한 데이터를 채워서 화면에 렌더링하는 방식
• 초기 로딩 속도는 느리지만 한번 그리고 나면 이후에는 필요한 부분만 교체한다.
• 화면에 뜨고 나면 사용자가 화면과 인터렉션할 수 있는 시점이 동일하다.
• html을 하나만 사용하기 때문에 화면 깜박임 없이 유연한 화면 전환이 가능하다.
• 검색엔진 최적화가 어렵다.

SSR(server-side rendering)

• 서버에서 html에 필요한 데이터를 다 채워서 내려준다.
• 초기 로딩 속도가 빠르다.
• 대신 컨텐츠가 너무 빨리 떠서 자바스크립트가 입혀지기 전에 사용자가 화면을 보게 될 수 있다.(화면을 보는 시점과 인터렉션이 가능한 시점에 차이가 날 수 있음)
• 화면 전환 시 화면 깜박임이 있을 수 있다.(페이지마다 다른 html을 사용하기 때문)
• 검색 엔진 최적화에 좋다.

🫡 Next.js 설치와 개발환경 셋팅

npx create-next-app@latest

• 터미널에 입력하고 나면 여러가지 옵션을 선택해야하는데 자신의 프로젝트에 맞게 선택하면 된다.

page.js : 메인페이지
layout.js : page.js 감싸는 파일 (head, 상단메뉴 코드 작성..)
global.css : 모든 페이지에 적용할 스타일
xxx.module.css : 특정 페이지에만 적용가능
api 폴더 : 서버기능 만드는 곳

• page.js, globals.css, page.module.css 내용 다 지우고 시작합시다

🫡 라우팅, layout.js

Next.js의 자동 라우팅

• app 폴더안에 있는 폴더들을 자동으로 url로 만들어줍니다.

1. app폴더안에 폴더만들고
2. 그 안에 page.js 넣기

중복되는 html은 layout.js 파일에

• layout.js에 있는 {children} : page.js 들어가는 부분

• page.js 보여줄 때는 옆에, 상위에 있는 모든 layout.js 합쳐서 보여줌

• 각 폴더안에도 layout.js 작성가능

export default function Layout({ children }) {
  return (
    <div>
      <p>layout.js는 여러개 만들어도 됩니다.</p>
      {children}
    </div>
  )
}