Next.js는 Library가 아닌 Framework 입니다 주도권을 누가 가지고 있나에 따라 Library vs Framework
사전 랜더링 이해하기
브라우저의 요청에 사전에 랜더링이 완료된 HTML을 응답하는 방식
기존에 react 랜더링 CSR Client Side Rendering
즉 처음에는 index.html 빈 껍데기를 보냄 -> JS 번들링된 파일로 컨테츠 렌더링
- 여기서 JS 번들링이 되어야 실제로 화면이 랜더링이 된다. 때문에 초기 랜더링이 느리다 (FCP가 느리다) 초기 접속이후 빠름
Next JS는 서버에서 JS실행해서 랜더링된 HTML을 보낸다 그래서 FCP가 빠르다 하지만 인터랙션 불가 화면에 랜더링은 JS bundle 이후에 hydration작업이후 상호작용 가능
Page Router
Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공
두가지 방법
/page
about.js --> js파일의 이름을 URL 라우팅
/about/index.js --> 폴더이름으로 URL 라우팅
//루트 컴포넌트
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
//Component props typeof = NextComponentType<NextPageContext, any, any>
페이지 컴포넌트의 유연성을 보장하는 복잡한 타입 정의입니다.
현재 페이지 역할을 하는 전달받는 props
//pageProps typeof = { [key: string]: any }
해당 컴포넌트가 받을 키-값 쌍의 객체 props ReactStrictMode
React 최신 버전에서 더이상 권장 되지 않는 레거시 메서드를 사용하면 경고
기존에 사용했던 문자열 ref 경고
함수들이 예기치 않게 두번 호출하는 부작용 탐색, 시뮬레이션 진행
예시) useEffect cleanUp()
- 해당 모드는 개발 환경에서만 작동한다
Query String / 동적라우팅
/search?id=1 과 같은 query string을 받을 때
const router = useRouter()
const {q}= router.query
/search/1 동적 라우팅으로 받을 때
파일이름을 [id].tsx
const router = useRouter()
const {q}= router.query
/search/1/2/3/4 catch all segment
파일이름을 [...id].tsx
/search optional catch all segment
파일이름을 [[...id]].tsx 네비게이팅
//링크로 이동
<Link href={'/'}/>
//라우터로 이동
const router = useRouter()
const handleClick =()=>{
router.push('/')
router.replace('/')
router.back()
}프리페칭
Next js는 모든 페이지에 대한 번들로 처리하면 너무 오려걸리기 떄문에 상호작용까지 오랜시간이 걸린다 따라서 해당 접속하는 페이지에 대한 JS 번들링을 끝내고 하이드레이션 과정을 거친다 하지만 이렇게 되면 페이지 이동때마다 똑같은 과정으로 너무 오랜 시간 랜더링이 걸리는데 이걸 초기 페이지에서 접속할수있는 모든 페이지들에 따라 pre fetching으로 JS 번들을 진행한다
//Link 컴포넌트로 prefetch
<Link href={'/'} prefetch={true | false}/>
//Router로 prefetch
useEffect(()=>{
router.prefetch('/book')
},[])API Routes
스타일링
index.css 처럼 css를 나누었을때 해당 파일안에서 css는 별도로 import를 막아두고 , app 컴포넌트 안에서만 import를 할수있다
따라서 css 파일을 모듈화 시켜야한다
index.css 가아닌 index.module.css로 생성후 -> import style from './index.module.css'
//App.tsx
type NexPageWithLayout = NextPage & {
getLayout?: (page:ReactNode) => ReactNode
}
const getLayout = Component.getLayout ?? ((page:ReactNode)=> page);
{getLayout( <Component {...pageProps} />)}
//Home.tsx
Home.getLayout = (page:ReactNode)=>{
return <CustomLayout>{page}</CustomLayout>;
}왜 함수가 객체인가 https://reactjs.winterlood.com/0f33b159-6b19-433b-8db4-68d6b4a122e0
