[Next.js] React와의 차이점

설치하기

npx create-next-app@latest . —typescript

 

 

React : Library, CSR

 

Next : Framework, SSR

 

• React와 다르게 라우팅 등 기본적으로 나오는 것들은 없지만, 지정된 장소에 코드를 작성하면 자동으로 코드를 불러온다.
  ex) pages폴더안에 원하는 컴포넌트 제목을 작성하면 자동으로 라우팅된다.
• React처럼 자유로운 수정은 불가능하다.
• React는 오류페이지를 작성해야하지만, Next는 default page 존재.(수정가능)
• React : 브라우저가 유저가 보는 모든 UI를 만든다. 브러우저가 js를 가져와서 그 js가 모든 ui를 만든다. html은 비어있는 <div>하나뿐이다. (느린 연결에서 큰 단점이 생김)
• Next : html이 존재하므로 느린연결이나, js가 비활성화되어있어도 html을 볼수는 있다.
  api를 제외한 다른 것들은 먼저 보인다. (pre-rendering) 그리고 나서 React.js가 클라이언트로 전송되었을때 react app이 된다. React.js를 프론트엔드 안에서 실행하는 것을 hydration 이라 부른다.
  Next.js는 React.js를 백엔드에서 동작시켜서 이 페이지를 미리 만드는데(ssr) 이게 component를 미리 렌더를하고,
  렌더링이끝나면 html이 되고, 그 html을 소스코드에 넣어준다.
  그럼 유저는 로딩이 되지않았을때 미리 html을 볼수 있기때문에 seo에 좋은것. (로딩이 되기전에 소스코드가 이미 있기 때문에)
• 장점 : 앱에있는 페이지를 미리 렌더링한다. (static)
• rules
  • 함수형 컴포넌트에서 jsx 를 리턴하는 default export 함수는 함수선언문으로 정의한다. 그 외 함수들은 화살표 함수를 사용한다.
  • pages안의 js파일은 url 주소이므로 소문자로 작성, 안에있는 컴포넌트는 어떤 이름이던지 상관은 없으나 export default 가 필수로 붙어야함.
  • nextjs에서는 anchor태그를 사용하지않는다. → react의 link와 같음.(새로고침방지) → next/link의 Link href를 사용 → clinet side rendering이 가능 but className이나 style 등을 넣어줄때는 <Link></LInk> 안에 a태그에서 해줘야한다.