Frontend/Next.js 썸네일형 리스트형 Next.js를 배워보자-4 NextJS 앱 최적화하기 각 페이지에 메타데이터와 ); }; export async function getStaticProps(context) { const featuredEvents = await getFeaturedEvents(); return { props: { events: featuredEvents, }, }; } export default HomePage; 모든 페이지들에 공통적으로 위 데이터를 넣고 싶다면 _app.js 파일에서 처리해주면 된다. 만약 _app.js와 특정 페이지에 둘 다 설정해주었다면 Next.js는 알아서 둘을 병합해서 나타낸다. _app.js 파일 말고도 pages > _document.js 파일에 다음과 같이 작성해볼 수도 있다. import Document, { H.. 더보기 Next.js를 배워보자-3 페이지 사전 렌더링 & 데이터 페칭 표준 React라면 빈 HTML 파일과 모든 js 코드가 표시될 것이다. 그리고 js 코드가 실행되면 내용이 표시될 것이다. 이때 서버로부터 데이터를 불러오는 경우 시간이 소요될 수도 있다. 이는 React는 사전 렌더링된 페이지를 반환하지 않기 때문이다. 사용자가 페이지를 방문하면 Next.js는 사전 렌더링된 페이지를 반환한다. 사전에 HTML 페이지를 완성해놓고 완전히 채워진 HTML 파일을 클라이언트에게 전송하게 된다. 그래서 SEO 관점에서 좋다는 것이다. 또한, Next.js는 포함된 js 코드를 모두 재전송하는데 이를 hydrate라고 한다. 이 코드들은 나중에 사전 렌더링된 페이지를 대체하고 React는 그에 알맞은 작업을 한다. 사전 렌더링은 오직 최초.. 더보기 Next.js를 배워보자-2 페이지 & 파일 기반 라우팅 React 앱 상에서는 라우팅을 사용하기 위해서는 라우트에 관련된 다양한 컴포넌트를 react-router-dom으로부터 추가한다. 하지만 Next.js는 React 라우터를 설치하지 않고, 라우트나 페이지 구조를 정의하는 데에 JSX나 js 코드를 전혀 사용하지 않는다. Next.js에서는 React 컴포넌트 파일을 생성한다. 이후, 설정된 폴더 구조로부터 프로젝트의 라우트를 도출해 내도록 만든다. Next.js는 pages 폴더를 자동으로 확인해서 라우트 구조를 도출해 낸다. pages 내부 폴더 구조가 다음과 같다고 해보자. pages │ about.js => my-domain.com/about │ index.js => my-domain.com/ │ └─products .. 더보기 Next.js를 배워보자-1 Next.js Nextjs는 프로덕션용 React 프레임워크이다. 또한, React의 풀스택 프레임워크라고도 한다. React 자체가 이미 라이브러리인데, 이는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있다. 그래서, 대규모 프로젝트를 하는 경우 라우팅, 인증을 위한 라이브러리를 추가적으로 사용해야 한다. Nextjs는 React 상에 구축된 프레임워크이다. 라이브러리에 비해서 프레임워크는 조금 더 규모가 크다. Nextjs를 사용하게 되면 서드 파티 라이브러리를 사용하는 빈도도 줄어들게 된다. 서버 사이드 렌더링 Nextjs가 추가하는 기능 중 가장 중요한 기능은 바로 내장된 기능인 서버 사이드 렌더링(SSR)이다. 서버 사이드 렌더링은 클라이언트 측이 아닌 .. 더보기 이전 1 다음
