NextJS- 페이지렌더링

페이지 렌더링 일반 리액트는 사전렌더링이 되지않아 SEO 에 적합하지못한다. 이같은경우 NextJS 에서 제공하는 페이지 렌더링 방법이 2가지가 있다. 이 방법은 코드실행부분이 다르다는것에 집중해서 학습해보자. Static Generation Static Generation 은 프로젝트를 빌드하게됬을때 사전렌더링이 되게된다. 수시로 데이터가 업데이트되야할때 는 추가적인 작업이 필요하지만 그렇지 않은경우 빌드할때만 해당내용들을 사전렌더링을 하게된다. getStaticProps 을 사용한다. 코드를 보며 살펴보자 import React from "react"; import MeetupList from "../components/meetups/MeetupList"; export const DUMMY_DATA ..

• format_list_bulleted 프론트엔드/NextJS
• · 2023. 2. 7.
• textsms

NextJS- 파일기반 라우팅

NextJS 의 파일기반 라우팅 을 알아보자NextJS 의 파일기반 라우팅은 pages 라는 디렉토리에 파일이름으로 생성이된다.기본적인 사용법파일명, 폴더명이 해당 라우트명으로 지정되게된다.index 의 의미pages 안에 index.js 가 있는데 index 파일명은 해당 루트를 나타낸다.즉 pages 안에 있는 Index.js 는 http://localhost:3000 로 접근했을때 나타나는 페이지이다.중첩라우팅중첩라우팅 또한 디렉토리를 생성하여 구현할수있고 디렉토리명이 하위 라우트명이 되게 된다.여기서 news 디렉토리안에 index.js 가 또 있는데 이는 http://localhost:3000/news 로 진입했을때 페이지를 나타내게된다.이런식으로 중첩라우팅을 쉽게 구현할수있다.동적라우팅next..

• format_list_bulleted 프론트엔드/NextJS
• · 2023. 2. 6.
• textsms