Learning Log/Next.js

[next.js] 생활코딩 Next.js 13 1일차

자척개 2023. 8. 3. 01:16
반응형

* 범위 : 0~7

 

* 0. Next.js 란 무엇인가?

- React 기능을 기반으로 한 풀스택 웹 어플리케이션 프레임워크

- React + Expressjs

- SSR 지원 => 검색 엔진 친화적 + 초기 로딩 속도 빠름

- 13 버전 이후 App router 지원 => Server Component라는 새로운 기능 사용

 

* 3. 빌드와 배포

- npm run dev : 개발 서버 켜기

- npm run build : 배포 서버 만들기

- npm run start : 배포 서버 켜기

=> 배포 서버를 따로 만드는 이유는 배포 서버를 이용하면 페이지 로딩 시 통신에 사용되는 resources가 훨씬 줄어들기 때문

배포 서버의 경우 346kb

 

* 5. 라우팅

- 다이나믹 라우팅 : 경로가 '.../read/1' 이렇게 숫자가 붙는데 숫자에 해당하는 모든 페이지를 미리 만들어두지 않을 때 사용

- 사용법

1) 경로 지정 시 [id] 폴더를 만든다 => src > app > read > [id] > page.js

2) page.js 컴포넌트에서 props로 id를 받아온다

export default function Read(props) {
  return (
    <>
      <h2>Read</h2>
      parameters : {props.params.id}
    </>
  );
}

 

* 6. SPA

- next에서는 <a> 대신 <Link>만 활용해도 SPA를 경험할 수 있다

=> 페이지 이동 시 변화된 부분만 통신하고, 방문했던 페이지로 다시 이동 시 재통신하지 않음

 


원티드 프리온보딩을 하면서 next에 대해 배우게 되었는데, 생활코딩에서 강의를 시작하신다고 하셔서 다시 기초부터 시작!!

💪아자아자 1일차💪

반응형