Next.js install

npx create-next-app

library vs framework

1. 라이브러리는 개발자가 라이브러리를 불러와서 사용한다. ( 개발자 입장에서 직접 코드를 친다, 파일명을 아무렇게나 지을 수 있다.)
2. 프레임워크는 코드를 불러오는 것이다. ( 특정한 규칙에 따라서 특정한 것을 작업해야 한다. 코드를 어떤곳에 넣으면, framework가 그 코드를 부르는 형태이다. )
3. 프레임워크는 그 자체로 존재하므로 룰을 지켜 사용해야 한다.

동적 라우팅 1.

index.js라는 파일과 about.js라는 파일에 리액트 컴포넌트를 넣게되면, 자동으로 라우팅 설정이 되어서, 주소로 진입 했을시에 리액트 컴포넌트가 보여진다.

index.js

about.js

<aside> 💡 Next.js가 파일의 이름 (something.js)를 자동으로 url의 이름으로 쓴다.

</aside>

1. Next.js의 장점은 앱에 있는 페이지들이 미리 렌더링 된다.
2. create-react-app vs next.js
   1. CRA는 CSR방식이다. 브라우저가 유저가 보는 모든 UI를 모두 브라우저가 진행한다.
   2. 단점 : 만약 인터넷이 느리다면!?!?! 자바스크립트 코드를 불러오는데 시간이 오래걸려 빈 화면만 보여준다. 다시 말해 브라우저가 자바스크립트, react코드를 fetching 한 다음에 UI가 보이기 시작한다.
   3. Next.js라면 페이지가 미리 렌더링 되어있다. (실제 html파일이 들어가있다.) pre-render
   4. react.js를 프론트엔드 안에서 실행하는것을 hydration이라고 부른다.
   5. 유저가 웹사이트에 들어가면, 초기상태의 Component로 미리 렌더링된 HTML페이지를 보게 되고, react.js가 다 받아와지면 상호작용하여 react앱이 된다.
   6. 유저는 최소한 html은 볼 수 있게 된다.
3. CSS module : 별로 안좋음... 스타일을 정의하는게 더럽다...
4. styles JSX : NEXT JS의 고유한 스타일 부여 방식
   1. 각자의 파일에 독립되어 스타일을 선언할 수 있다. (file scope)
   2. style안에 자바스크립트 문자열을 넣을 수 있다.
5. 전역 스타일
6. _app.js 최초 렌더링될때 페이지, next.js의 blueprint