개념
- React framework : react 앱을 더 편하게 구축
- React는 클라이언트 사이드 JS 코드로 UI에 초점이 맞춰져 있다.
- NextJS는 UI뿐만 아니라 여러가지 기능을 제공
- JS, TS 지원
핵심 기능
SSR(Server-side Rendering)
- 서버 사이드 렌더링 : 페이지 컨텐츠를 클라이언트가 아닌 서버에서 준비
- React로 처리 시
- 초기에는 비어있는 HTML 파일
- 서버에서 데이터를 가져와서 클라이언트에서 처리. 약간의 로딩이 존재
- ReactJS로 서버 사이드 렌더링을 구현할 수 있으나 까다롭고 추가 설정 필요
- 장점
- 사용자에게 더 나은 초기 환경 제공
- 사용자가 후속 탐색을 할 수 있다.
- 초기 요청으로 읽어들인 후에도 브라우저에서 기본 React 앱과 SPA를 실행
- 클라이언트 사이드와 서버 사이드를 혼합
파일 기반 라우팅
- 라우팅
- 탐색하고 페이지를 로딩하는 것.
- 해당 동작을 일으키는 것이 라우터의 역할
- 브라우저는 기본적으로 URL을 감시하다 변경 시 백엔드 서버에 요청을 보낸다.
- React는 브라우저의 이런 기본 동작을 막지 못하고 React Router라는 라이브러리를 통해서 기능을 사용할 수 있다.
// React Router 버전에 따라 다르다.
<Swtich>
<Route path='/' exact>
<MainPage />
</Route>
<Route path='/route1'>
<RouteOnePage />
</Route>
<Route path='/route2'>
<RouteTwoPage />
</Route>
</Switch>- NextJS는 해당 코드를 정의할 필요 없이 브라우저의 기본 동작을 막고 페이지에 다른 컨텐츠를 렌더링할 수 있다.
- 파일과 폴더를 이용하여 페이지와 라우트를 정의하고 동적 라우팅도 지원.
풀스택 앱 빌드
- React 프로젝트에 백엔드 코드를 쉽게 추가 가능
- DB 저장 및 조회, 인증 추가 등의 작업 가능
- 단, 이 경우에는 NodeJS를 먼저 알아야 한다.
프로젝트 구조
styles
- 스타일 파일 (즉, css 관련 파일이 존재)
public
- 페이지에 사용할 공개 리소스
- 아이콘이나 벡터 그래픽이 여기에 존재한다.
- 기존의 react 앱에서 존재했던 html은 미존재. 이유는 NextJS에서는 사전 렌더링을 하므로 불필요.
pages
- 파일 기반의 라우팅을 설정
- 애플리케이션을 구성할 여러 페이지를 설정
- 해당 폴더에 위치하는 파일들의 이름을 통해서 동적 페이징 가능.
중요 기본 페이지
_app
- 서버로 요청이 들어올 때 가장 먼저 실행되는 컴포넌트. 즉, 최상위 컴포넌트다.
- 페이지에 적용할 공통 레이아웃 역할
- 프로퍼티를 받고 구조 분해 할당을 하여 정보를 꺼낸다.(Component, pageProps)
- pageProps: 페이지가 받는 특수 프로퍼티. getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 페칭한 초기 속성값이 된다.
- Component: 실제 렌더링될 페이지 컨텐츠를 저장하고 있는 프로퍼티. 즉, 서버에 요청한 페이지가 된다.
export default function App({Component, pageProps}) {
return (
<Component {...pageProps} />
)
} _document
- _app 다음에 실행되는 페이지
- <head>, <body> 태그 안에 들어갈 내용들을 커스텀할 때 활용
- Document 클래스를 상속받는 클래스 컴포넌트로 작성해야 한다.
- 렌더 함수에는 반드시 <Html>, <Head>, <Main>, <NextScript> 태그는 포함되어야 한다.
- 해당 페이지는 서버에서 실행이 되기에 이벤트 핸들러, 브라우저 API가 포함된 코드는 실행이 되지 않는다.
- <Main>을 제외한 부분은 브라우저에서 실행되지 않는다.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Documnet() {
return (
<Html lang='en'>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}설치
-
npx create-next-app@latest {프로젝트 이름}
터미널에 원하는 경로에서 해당 명령어 입력 -
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to usesrc/directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes해당 질문들에 원하는 것에 엔터를 하면 된다.
참고
https://merrily-code.tistory.com/154
https://nextjs.org/docs/getting-started/installation
개발자를 원하는 사람.