먼저 npx create-next-app@latest --typescript로 입력한다
중간에 테스트를 할건지 물어보는데 여기서는 no를 입력해줘야한다
그렇지 않으면 테스트 버전으로 작동한다.
library 와 framework 핵심적인 차이점
library 는 개발자로서 내가 사용하는 것
직접 불러와서 내가 사용하는 것
framework는 나의 코드를 불러온다.
잘 적기만 한다면 모든 걸 동작하게 도와준다
React와 next 비교
React는
ReactDom.render 라는 부분이 항상 만들어져있다.
CRA 하게되면 항상 App Component로 시작한다.
어떤 폴더구조로 만들지 정하고 고민한다
index와 app이 항상 있다
다른 페이지로 넘어갈 때 어떻게 할지 내가 정한다.
Next
특정한 규칙을 따라서 특정한걸 해야함
그것을 따라줘야 정상적으로 프레임워크가 돌아간다.
CSR이 아니어서 ReactDOM.render가 없다. 그래서 커스텀을
직접 할 수가 없다.
Pages 안에서 뭔가를 만드는 것이 전부이다.
React.js는 우리가 원할 떄 부르는 library
Next.js는 코드를 적절한 곳에 넣어줘야하는 Framework
(index라는 주소를 입력하면 404를 보여준다)
Next.js는 pages 폴더 안에 index.js (url:/이다 index는 예외적으로 /을 의미한다.)
about.js(url: /about)
하는 방식으로 돌아가는 프레임워크
about.js 안에 about이라는 함수가 없어도
파일명이 about이기때문에 param은 about이 된다.
(함수이름이 index와 같은 Home을 사용하는데도 렌더링이 잘 된다.)
React.js component를 export하고 있는 파일을 pages 폴 더 안에 두기만 하면
페이지를 추가할 수 있다.
- 중요한 것은 폴더이름이 url을 영향을 끼친다.
- export default로 해줘야 렌더링이 된다.
default export는 react component가 아니기 때문에 주의해야한다
(파일을 삭제하면 404가 뜬다)
Next.js는 자체적으로 404 페이지를 제공하며 커스텀 할 수 있다.
CRA는 없다
Next의 장점은 앱에 있는 페이지들이 미리 렌더링이 된다
이것들은 정적(Static)으로 생성된다.
React는 CSR로 렌더링이 된다.
HTML 소스코드 안에 내용이 들어가지 않는다.
소스코드를 보면 <div id="root"></div>하나만 출력되어있다.
만약에 자바스크립트가 비활성화 된다면 <noscript>가 보여진다.
고의적으로 자바스크립트를 멈추는 일 외엔 드물다.
네트워크를 느리게하면 흰화면들이 보이는데 CSR의 단점은 브라우저가 자바스크립트, react 등 모든 것을 fetch 한 후에야 UI가 보인다.
NEXT.JS는 자바스크립트가 비활성화되어도 그대로 보여진다
차이는 소스코드에 있다. 소스코드를보면 적어놓은 내용이 실제한다
네트워크가 느리거나, 자바스크립트가 비활성화되어도 유저는 최소한 HTML은 보게 된다.
유저가 왔을 때 UI는 완성되어있고, API만 기다리면 된다. 왜냐하면 이미 HTML안에 있기 때문이다.
next는 pre-rendering을 한다. 초기 로딩 때 많은 스크립트들을 같이 요청한다
처음에는 HTML만 보이고 이후에 react.js가 클라이언트로 전송했을 떄
react.js 앱이 된다.
react.js를 프론트 엔드 안에서 실행하는 것을 hydration이라 부른다.
next.js는 백엔드에서 동작시켜서 페이지를 미리 만든다
이게 컴포넌트들을 렌더 시키고 끝나면 HTML이 됨
그것을 소스코드에서 볼 수 있다.
그 이후에 react.js가 로딩 되었을 때 기본적으로 있는 것들과 연결이 되어서
일반적인 react.js 앱이 된다.
이런 방식은 2가지의 장점이 있다.
- 초기 상태의 컴포넌트 즉 미리 생성된 HTML 페이지를 볼 수 있다. 이후 상호작용이 일어나면
react.js 그걸 받아서 부드럽게 작동한다.
자바스크립트가 비활성화 되어도 UI는 잘보인다.
문제가 생겨도 UX가 훨씬 낫다
(javascript는 작동하지 않아서 기능은 작동하지 않는다.) - SEO 에 유리하다.
Next.js 어플리케이션에서 anchor<a> 태그로 네비게이팅을 하면 안된다.
네비게이트를 할 때 사용해야만하는 네비게이션 컴포넌트가 존재하기 때문이다.
만약에 anchor로 이동하면 전체 어플리케이션이 새로고침이 된다
(다시 받아온다)
Next는 그럴 경우에 느려질 수 있어서 원하지 않는다. 클라이언트 사이드 네비게이션을 위해
<Link> from next/link 사용을 권장한다.
<Link href="/">
<a>Home<a>
</Link>
<Link href="/about">
<a>About<a>
</Link>아까 <a href="/" >Home</a>로 이동 했을 때 보다
새로고침 없이 부드럽게 돌아간다.
(NEXT는 자신이 의도한대로 유저들이 사용하도록 가이드라인을 제시했다)
이 Link는 스타일도 클래스도 사용할 수 없다. 오직 href 역할만 할 수 있다.
dependencies도 적다. React는 React Router DOM을 인스톨 해야하지만
넥스트는 하지 않아도 된다. 모든건 넥스트에서 제공을 한다.
const router = useRouter();
console.log(router); 
이런식으로 뜨는데 여기서 많은 것을 알 수 있다.
<Link href="/">
<a style={{color: router.pathname ==="/" ? "red":"blue"}}>Home<a>
</Link>
<Link href="/about">
<a style={{color: router.pathname ==="/about" ? "red":"blue"}}>About<a>
</Link>이런 식으로 링크에 따라 색깔이 바뀌게 해줄 수도 있다.
.module.css에 관해서 이는 className={nav}에 먹지않는다.
className={styles.nav}라고 작성해야한다
이 패턴은 CSS모듈이라고 적어야한다.
개발자 도구로 ClassName을 확인하면 무작위 이름이 다르게 나온다.
이러면 말그대로 충돌을 만들지 않는다. 그래서 다른 클래스 이름에서도 nav를 사용할 수 있다.
module.css에서 btn이란 겹치는 이름이 있어도 무작위로 바뀌기 때문에 괜찮다
module.css 단점은 파일을 두개 만들어야하고 클래스이름을 기억해야하는게 단점이다
