Next.JS 프레임 워크
라이브러리 vs 프레임워크
https://www.youtube.com/watch?v=t9ccIykXTCM
라이브러리는 우리가 갖다쓰는 것,
프레임워크는 정해진 틀 안에서 우리의 코드를 불러서 씀
1.pages 폴더 안에 있는 파일명에 따라 route가 결정된다.
pages/about.js 생성 ->
localhost:3000/about (O)
2. 컴포넌트 마다 import react from "react" 할 필요가 없고
useState,useEffect, lifecycle method 같은 애들을 써야 할 경우에만 호출.
3.next.js 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것
static으로 생성됨
create react app과 next.js의차이점
create react app은 client-side render하는 앱을 만듬
브라우저가 자바스크립트를 받아서 유저가보는 ui를 만드는 모든것을 함
자바스크립트에 연결 되기 전까지 아무런 화면을 볼 수 없음
예)창의 기본인 nav도 볼 수없고 빈화면
그러나,
next.js 는 html로 pre-rendering되기 때문에 자바스크립트 연결되기 전에도 어느정도 볼 수 있는게 있다.
네비게이션 볼 수 있음.
Next.js는[name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다.
Blah.css x
Blah.module.css o
import styles from "./NavBar.module.css"
className={styles.nav}
ㅡmodule파일 사용하는 이유
자바스크립트 prop으로 입력하게되면 빌드시 무작위의 클래스네임으로 저장되어 충돌이 일어나지않는다.
CSS Module 사용하기
1. className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`} //백틱,문자열로 기본값, 조건값 두 개 사용
2. [styles.link, router.pathname === "/" ? styles.active : ""].join(" ") // [] 배열로 합쳐서 사용
NextJS고유의 방법- styled jsx
CSS-in-JS
격리된 범위 (컴포넌트) CSS에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공합니다. 목표는 불행히도 서버 렌더링을 지원하지 않고 JS 전용인 Web Components와 유사한 "Shadow CSS"를 지원하는 것입니다.
https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js
styled-jsx를 사용하는 컴포넌트는 다음과 같습니다.
```
< style jsx>{`
CSS 스타일..
`}< /style>
```
styled-jsx
https://github.com/vercel/styled-jsx
Sass Support
Next.js를 사용하면.scss 및.sass 확장자를 모두 사용하여 Sass를 가져올 수 있습니다
golbal로 지정하는 법
NextJS는 _app.js를 첫 번째로 렌더링 후 index.js나 나머지 렌더링
_app.js는 prop으로 컴포넌트와, 페이지 프롭을 받는다.NextJS 프레임워크 규칙이다.
about.js를 렌더링하려면 해당 컴포넌트를 _app.js 의 프롭으로 전달해서 렌더링 함.
페이지나,컴포넌트에 스타일을 적용하고 싶다면 .css x module.css이여야함
하지만 커스텀 app컴포넌트가 있는 곳이라면 모든 globalstyles를 임포트할 수 있음.
Custom App
Next.js는 App 컴포넌트를 사용하여 page를 초기화합니다. 이를 재정의하고 페이지 초기화를 제어할 수 있습니다. 이를 통해 다음과 같은 놀라운 일을 할 수 있습니다.
1. 페이지 변경 간에 레이아웃 유지
2. 페이지 탐색 시 state 유지
3. componentDidCatch를 사용한 Custom 에러 처리
4. 페이지에 추가 데이터 삽입
5. Global CSS 추가
기본 App을 재정의하려면 아래와 같이 ./pages/_app.js 파일을 만듭니다.
```
export default function MyApp({ Component, pageProps }) {
return < Component {...pageProps} />
}
```
https://nextjs.org/docs/advanced-features/custom-app
Custom App (with 타입스크립트)
_app.ts가 아닌 _app.tsx파일을 만들고 아래와 같이 작성
```
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps){
return < Component {...pageProps} />
}
```
https://nextjs.org/docs/basic-features/typescript#custom-app
+ 파일명.module.css 파일 형태를 제외한 모든 나머지 css파일들은 _app.js에서만 import해와서 사용해야 한다. (글로벌 css간의 충돌을 피하기 위해서이다.)
https://nextjs.org/docs/messages/css-global