next는 리액트 기반의 프레임워크입니다. next의 개발 이유는 여러가지가 있지만 리액트에서 구현하기 어려운 기술들(서버사이드 렌더링, 라우팅 등)을 쉽게 개발을 할 수 있게 해줍니다.
이 포스팅은 기본적으로 리액트를 알고 있어야합니다.
next의 장점은 다음과 같습니다.
- 폴더 및 파일 기반으로 라우팅을 지원합니다.
- 기본적으로 서버사이드 렌더링을 제공합니다.
- 코드 스플리팅을 지원합니다.
- 서버와 함께 구현이 가능합니다.
- 스태틱랜더링을 지원합니다.
리액트와 다른점
1. _app.js
모든 페이지는 _app.js를 통합니다.
function MyApp({ Component, pageProps }) {
return<Component {...pageProps} />
}여기서 props로 넘어온 Component는 현재 페이지를 의미합니다. 라우팅을 할 컴포넌트의 위치를 의미합니다. pageProps는 나중에 말씀드리겠습니다._app에서 라우팅을 구현하는 법을 알아봅시다.
index페이지로 돌아가서 텍스트를 적습니다. 그리고 pages폴더안에 about이란 페이지를 만듭니다. 그리고 최상단 경로에 Layout이란 파일을 만듭니다.
function Home() {//index페이지
return <div>Hello! World</div>
}
//--------------------------------
function About() {//About페이지
return <div>About</div>
}
//--------------------------------
function Layout({children}) {//About페이지
return (
<div>
<div>헤더 영역</div>
<div>{children}</div>
<div>푸터 영역</div>
</div>
)
}next에선 index가 리액트에서의 app.js라고 생각하시면 됩니다.
next는 폴더 및 파일 기반으로 라우팅을 지원한다고 했습니다. 그럼 리액트처럼 router를 임포트하고 switch컴포넌트를 감쌀 필요 없이 _app.js를 이렇게 변경시킵니다.
import Layout from "../components/Layout"
function MyApp({ Component, pageProps }) {
return(
<Layout>
<Component {...pageProps} />
</Layout>
)
}이렇게 되면 Layout의 children영역안에 next안의 모든 pages들이 들어가고 링크에 따라 라우팅되게 됩니다. 링크를 거는법은 나중에 말하겠습니다. 하지만 꼭 저렇게 할 필요없이
function MyApp({ Component, pageProps }) {
return(
<>
<Header>
<Component {...pageProps} />
</Footer>
</>
)
}이렇게 상황에 맞는 레이아웃 구성을 만들어도 됩니다.
2. document
next에서는 head안에 들어갈 title, meta태그등을 쉽게 작성할 수 있고 또 동적인 작성도 가능합니다.
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return(
<Layout>
<head>
<title>타이틀1</title>
</head>
<Component {...pageProps} />
</Layout>
)
}next에서 제공하는 head컴포넌트를 사용하면 head안에 들어가는 속성을 쉽게 작성할 수 있고 동적으로 작성도 가능합니다. 그리고 각 page마다 별개로 head태그를 다르게 작성할 수도 있습니다.
3. Code splitting and prefetching
넥스트는 자동으로 코드 스플리팅을 해줍니다. 코드스플리팅이란 각 페이지에서 정말 필요한 코드들만 랜더링 하는 기술을 의미합니다. 즉 이말은 홈페이지가 렌더링될 때, 다른 컴포넌트및 페이지의 코드들은 로드되지 않는 것을 말합니다. 이것은 만약 내가 어떠한 페이지에서 오류를 작성해도 다른 페이지에 전혀 영향이 안간다는 것을 의미합니다.
게다가, Next.js는 자동으로 백그라운드에서 링크된 페이지의 코드를 프리페치하기 때문에 Link컴포넌트를 사용할 때마다 브라우저의 viewport에 나타나게 됩니. 링크를 클릭하면 링크된 페이지에 대한 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 바로 이루어지게 되는 것이다.
