SSR 서버 사이드 렌더링

준비된 html을 서버에서 브라우저에게 response로 보내줌 클라이어늩 대신 서버에서 페이지를 준비 리액트는 csr이라 서버에 영향 x 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있음 -> 화면 로딩이 지연되어 ux측면에서 좋지않음 -> 검색 엔진시 웹크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색에진 최적화에 문제가 됨 -> Next.j는 ssr이라 사용자와 검색 엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있어 검색엔진 최적화에 좋은 영향을 줌

모든 페이지를 pre-render 함. 모든 페이지를 위한 HTML을 클라이언트 사이드에서 자바스크립트로 처리하기 전, 사전에 생성하는 것. 그래서 SEO 검색엔진 최적화가 좋아짐.

javascript-disable 처리

###pages 이 폴더 안에 페이지들을 생성 index.tsx가 처음 “/” 페이지가 됨

_app.tsx는 공통되는 레이아웃 작성 모든 페이지에 공통으로 들어가는 걸 여기에 넣어주면 됨.

파일기반 네비게이션 기능

페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터. 파일이 페이지 디렉토리에 추가되면 자동으로 경로로 사용. 페이지 디렉토리 내의 파일은 가장 일반적인 패턴을 정의하는데 사용가능.

public

  • 이미지 같은 정적 에셋들을 보관함

styles

스타일링 처리 폴더 모듈 css는 컴포넌트 종속적으로 스타일링 하기 위한 것이며 확장자 앞에 module을 부텽줘야함..

next.config.js

  • Next.js는 웹팩을 기본 번들러로 사용
  • 웹팩관한 설정은 여기서 함.

force 해보고 안 되면 node verions 검색 후 설치할 거 버전 찾아보기