Next.JS 시작

Next.Js 설치명령어 

npx create-next-app@latest --typescript

 

NextJS를 처음사용해보는데, 

라이브러리인 리액트와는 다르게 정해진대로 코드를 작성해줘야한다.

 

리액트에서는 라우터 하나하나 다 연결을 해줬는데,

Next.JS로 하면 이미 만들어진 pages라는 폴더에 파일을 만들면 자동으로 라우터가적용이 되서 너무 신기했다.

주의해야할 부분은,

여기 있는 파일이름이 라우터 url이되기 때문에 잘써줘야 하고,

컴포넌트 함수이름은 상관이없다

 

또한, 반드시 export default를 써줘야 에러가 나지 않는다. 

export default function About() {
  return "AboutHere :)";
}

=> 즉 유저에게 보여주고 싶은게 있다면, pages폴더에서 export default function을 해 줄 것 ! 

 

create react app은 client-side render (CSR) 

CSR은 브라우저가 유저가 보는 UI를 만드는 모든것을 한다는 것을 의미. 

 

브라우저가 react.js를 다운받고, 내가 쓴 코드를 다운받았을때 

그때 react.js는 다른 모든 것들을 렌더링하고 유저는 네비게이션바를 비롯한 나머지를 보게된다.

= 브라우저가 처음에는 빈 화면이었다가 -> 자바스크립트를 가져와서 다운을 받은 후 client-side의 자바스크립트가 모든 UI를 만든다 

 

문제점> 로딩/네트워크가 느린 유저의 경우 처음에 빈화면이 몇초간 유지가 됨

 

Next.JS의 경우에는 유저가 매우느린 연결을 하고있거나,

자바스크립트가 완전희 비활성화가 되어있어도 유저는 HTML을 볼 수 있다. 

 

#Next.Js 작동방식 

 

Next.sj는, 기본적으로 서버측에서 React코드를 실행한다.
React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다.
그 후, 브라우저에서 React를 사용해 웹페이지를 완성한다.