Next란
리액트 라이브러리에 프레임워크이다.
pre-reloading을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해준다.
검색엔진에 잘 노출 될 수 있도록 해주고, SSR과 CSR도 혼합해 사용 가능하다.
- 💡ServerSide 동작 원리
- Next Server가 GET요청을 받는다.
- 요청에 맞는 Page를 찾는다.
- _app.tsx의 getInitialProps가 있다면 실행한다.
- Page Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
- _document.tsx의 getInitialProps가 있다면 실행하고 pageProps들을 받아온다.
- 모든 props들을 구성하고 _app.tsx -> pageComponent 순서로 렌더링 후 모든 Content를 구성하고 _document를 실행해 html형태로 출력한다.
- Next는 pages라는 폴더안에 거의 모든 파일이 들어간다.
이 pages 폴더안에 _app.js와 _document파일이 있는데 이 2파일은 최초로 실행이 되는 파일이다.
_app.tsx -> _document.tsx순서로 실행이 된다.
두 파일 모두 server에서만 진행 되는 파일이다.
(따라서, Client에서 사용 되는 로직을 사용할 수 없다. css나 event핸들러 같은 로직 수행 불가능)
_app.tsx 파일
- 전체 컴포넌트의 레이아웃으로 생각 하면 좋다.
(공통 레이아웃이고 최초에 실행이 되어 내부에 들어갈 컴포넌트들을 실행한다.) - 내부 Content들이 있다면 전부 실행하고 html의 body로 구성한다.
- 기본 _app.tsx 파일 구성
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
//props로 받은 Component는 요청한 페이지이다.
// GET / 요청을 보냈다면, Component에는 /pages/index.js파일이 props로 내려온다
// pageProps는 페이지 getInitialProps를 통해 내려 받은 props들을 의미한다.-
_app.tsx에서 초기 컴포넌트를 넣고 싶다면 기존 /경로 일 대 적용되는 index.tsx를 사용하면 된다. 하지만, index.tsx를 사용하는 방법은 Component는 Props로 내려주는거다. 따라서, <Component{...pageProps}/>로 전달을 받는 방식이다.
이때, pageProps는 페이지 getInitialProps를 통해 내려받은 props를 의미한다. -
props로 Component와 pageProps를 받는다.
-
"http://localhost:3000/"은 index.tsx를 가리키고 "http://localhost:3000/about"는 about컴포넌트를 가리킨다.
pageProps란
-
getInitialProps, getStaticProps, getServerSideProps를 통해 가져온 초기 속성값을 의미
-
만약 위의 값들이 없다면 빈 객체를 반환한다.
// about.tsx
...
export async function getStaticProps() {
const test = "Hello";
return {
props: {
test,
},
};
}
// _app.tsx
import App from 'next/app'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps }
}
export default MyApp->만약 _app.tsx에서 pageProps르 콘솔로 찍으면 {test:'Hello'}가 출력 된다.
- _app은 getStaticProps와 getSercerSideProps를 지원하지 않는다.
import App from 'next/app'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps }
}
export default MyApp- _app에서 getInitialProps를 사용시 Automatic Static Optimization이 비활성화되어 모든페이지가 서버 사이드 렌더링 된다.
_document.tsx
- _app.tsx다음으로 실행이 되는 파일이다.
- static html을 구성하기 위해 _app.tsx에서 구성한 html body가 어떤 형태로 들어갈지 구성
- 어플리케이션 로직은 들어가면 안된다 -> _app.tsx에 들어가야 한다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
//_app.js가 실행되면서 갖추어진 content들은 Main Component아래에 생성된다.
// 브라우저는 Main을 제외한 다른 component들을 initialize하지 않는다.
// 공통된 로직이 필요하면 _app.js를 활용한다.Next 13버전
- 라우팅 방식의 변경
- v12이전은 file단위로 라우팅 처리되었지만, v13적용 후 directory기준 라우팅 방식으로 변경 - layout.tsx
- 화면에 Layout을 구성하는 코드가 들어간다.- 부모 폴더에서 정의된 layout.tsx는 자식 폴더까지 적용된다.
- 만약 변경이 필요한 자식 폴더에서는 layout.tsx를 작성해 구성을 오버라이딩 할수 있다.
- app 폴더 하위에 Component폴더 만든 후 파일을 만들어서 작성 하면 나중에 app/layout.tsx에 components폴더에서 만든 파일을 적용해 주면 된다.
- page.tsx
- 라우팅 path를 폴더로 지정하면 해당 폴더의 index.tsx가 아닌 page.tsx파일을 읽고 (layout.tsx등 예약 파일이 있으면 그것과 함께 묶어서) 페이지 출력한다.
- app폴더
- app폴더에 layout.tsx, page.tsx 두개의 파일만 남기고 모두 삭제한다.
//
// app/layout.tsx
// 이 파일에서 적용하고자 하는 layout (헤더나 푸터 등)을 return 안에 html태그 내 넣어주면
// 적용 된다.
//
// import './globals.css' -- 삭제
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
{/*
<head /> will contain the components returned by the nearest parent
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body>{children}</body>
</html>
);
}
//
// app/page.tsx
//
export default function Home() {
return <p>이것은 메인 페이지 입니다.</p>;
}- 만약 app 폴더 아래에 event폴더를 만들면 그 event폴더 아래에 page.tsx파일을 만든다했을 때, 'http://localhost:3000/event' 접속하면 이것인 이벤트 페이지 입니다.가 뜨는걸 확인할 수 있다.
- path parameter event폴더에 [id]폴더를 생성하면 '/event/adsad' /event뒤에 파라미터로 아무거나 와도 조회가 되는걸 확인 가능하다.
//
// app/event/page.tsx
//
export default function Event() {
return <p> 이것은 이벤트 페이지 입니다. </p>;
}
//
// app/event/[id]/page.tsx
//
export default function EventId() {
return <p> 이것은 이벤트 아이디 페이지 입니다. </p>;
}
3년 차 웹 풀스택 개발자 | 더 나은 사용자 경험을 만드는 개발자