Frontend Study - 2/Next.js (4) 썸네일형 리스트형 Next.js : _App.tsx , _document.tsx 알아 보기. _document에서 UI작업 금지 ! 1. _App.tsx 넥스트js의 앱 컴포넌트는 리액트의 그것 처럼 페이지의 시작을 담당한다. 그리고 아래와 같은 역할을 할 수 있다. - 레이아웃 지정 - 페이지 별로 추가 데이터를 전달 - 상태 값 분배 - 글로벌 CSS 형식은 기본값인 App.tsx (밑줄이 없는 App임! _App이 App을 오버라이드 하는 것)를 오버라이드(재정의) 하기 위해서 아래와 같이 사용한다. //_app.tsx import type { AppProps } from 'next/app' export default function MyApp({ Component, pageProps }: AppProps) { return } - 프롭으로 받아온 Component는 활성화된 페이지를 말한다. 요놈 덕에 라우팅을 통해 새로운 페이.. Next.js : SSR. getServerSideProps / 클라이언트 사이드 페칭 필요한 경우(2) Next.js의 핵심 기능을 위한 두가지 함수. 첫번째가 getStaticProps() 사전 정적 생성을 위한 함수이고, 두번째가 getServerSideProps() 이다. gerServerSideProps와 getStaticProps의 가장 큰 차이점은, - 함수가 실행되는 시점 - 클라이언트 요청에 대한 접근성 두가지라고 할 수 있다. getStaticProps의 경우 말 그대로 사전 생성이다. 사전 빌드될 때 실행되며, 그렇기 때문에 실제 클라이언트의 요청과는 별개의 것이라고 할 수 있다. 반면에 1) getServerSideProps 함수의 경우 사용자의 요청이 일어날 때 실행되는 함수이다. 페이지 컴포넌트에 이 함수가 있다면 해당 페이지에 대한 요청이 들어 올 때마다 이 함수가 실행되게 된다... Next.js : 정적생성 SSG 과 fetch! + ISR (1) Next.js를 통해 사전렌더링을 구현하는 두가지 양식. 정적생성과 서버사이드렌더링이다. Static Generation 과 Server-Side-Rendering. SSG (Static Site Generation) / SSR (Server Side Rendering) 권장양식은 정적 생성이라고 한다. 둘의 가장 큰 차이점은 페이지의 생성 시점이다. SSG의 경우 빌드되는 동안 페이지가 사전 생성된다. SSR의 경우 배포 이후에 클라이언트 요청이 발생했을 때 페이지가 생성된다. getStaticProps 함수와 getServerSideProps 함수를 통해 정적 생성과 서버 사이드 렌더링을 구현할 수 있다. 하지만 두 함수를 사용하지 않더라도 next.js는 기본적으로 자동 정적 최적화(Automati.. NextJs : 넥스트js의 라우팅 정리. * 파일 기반 라우팅. 기존 React : 코드 기반 라우팅 -> Next js : 파일 기반 라우팅 Nextjs에서는 코드 내 라우트 정의를 따로 사용할 필요가 없다. 폴더와 파일명을 통해서 라우팅을 정의한다. index.js 파일이 폴더안의 페이지를 담당한다. products 폴더 안의 index.ts 파일은 'domain.com/products' url을 의미한다. 동적 생성은 폴더 혹은 파일명에 대괄호 [ ]를 함으로 가능하다. products 폴더안의 [id].ts 파일은 'domain.com/products/p1' or p2 or adfaf1 등의 url을 동적으로 연결시킨다. * 동적 생성 추가내용. 클라이언트 사이드에서 동적 생성한 페이지의 파라미터값을 얻기위해 useRouter를 사용한다.. 이전 1 다음
