yoosmg

이제 id값이 포함된 배열을 반환하 함수를 생성해줘야 한다. lib/posts.js를 열고 하단에 다음과 같이 getAllPostIds 함수를 작성한다. 이 함수는 posts 디렉터리에 있는 파일 이름의 목록(.md 파일 제외)을 반환한다. export function getAllPostIds() { const fileNames = fs.readdirSync(postsDirectory); // Returns an array that looks like this: // [ // { // params: { // id: 'ssg-ssr' // } // }, // { // params: { // id: 'pre-rendering' // } // } // ] return fileNames.map((fileNam..

앞서 index 페이지에 블로그 데이터를 불러왔으니 이제 개별 페이지를 만들어 보자. 해당 페이지의 URL이 아래 사진처럼 외부 블로그 데이터에 따라 달라지게 하려면 어떻게 해야할까? 외부 데이터에 따라 경로가 달라지는 페이지를 정적으로 생성하면, 동적 URL이 활성화된다. 단계 살펴보기 우선 각 포스트 경로는 /posts/로 설정하자. 여기서 는 posts폴더 내 마크다운 파일의 이름이다. 파일명이 ssg-ssr.md와 pre-rendering.md므로, 경로는 /posts/ssg-ssr 및 /posts/pre-rendering이다. 우선 pages/posts 아래에 [id].js 페이지를 만든다. [ ] 형태의 페이지는 Next.js의 다이나믹 라우트를 의미한다. 앞서 만든 다른 페이지와 마찬가지로..

빌드 시점이 아닌 요청 시점에 데이터를 페치해야 하는 경우 서버 사이드 렌더링을 사용할 수 있다. 페이지에서 getStaticProps 대신 getServerSideProps를 익스포트 하면 된다. getServerSideProps 함수 다음은 getServerSideProps의 스타터 코드. export async function getServerSideProps(context) { return { props: { // props for your component }, }; } getServerSideProps는 요청 시에 호출되므로 매개변수(context)에는 요청 관련 매개변수가 포함된다. 주의할 점은 요청 시점에 데이터 페치가 필수인 페이지를 프리렌더링 하는 경우에만 getServerSidePr..

pages/index.js를 열고 Home 컴포넌트 위에다 비동기 함수 getStaticProps를 추가한다. 해당 메서드는 getSortedPostsData 함수를 getStaticProps 내부에서 호출한다. 이후 props객체 내부에서 데이터를 반환하여 Home 컴포넌트에 하나의 prop으로 전달할 수 있게 한다. Home 컴포넌트에서 props를 { allPostsData }로 변경하고 태그를 추가하면 끝. import { getSortedPostsData } from '../lib/posts'; export async function getStaticProps() { const allPostsData = getSortedPostsData(); return { props: { allPostsDat..

이제 블로그 포스트를 만들어 보자. 데이터를 외부 소스에서 페치 하지 않고 파일 시스템에서 데이터를 읽어오려고 한다(로컬 마크다운 파일 활용). 마크다운 파일 만들기 먼저 루트 폴더에 posts라는 최상위 디렉터리를 하나 만든다. 그 안에 pre-rendering.md / ssg-ssr.md라는 두 개의 파일을 만들고 아래와 같이 입력한다. --- title: 'Two Forms of Pre-rendering' date: '2020-01-01' --- 내용생략 --- title: 'When to Use Static Generation v.s. Server-side Rendering' date: '2020-01-02' --- 내용생략 각 마크다운 파일 상단에 title과 date가 포함된 메타데이터 섹션이..

정적 생성은 데이터 유무에 관계없이 수행할 수 있다. 외부 데이터를 페치 할 필요가 없는 경우, 앱은 빌드 시점에 아래 그림처럼 자동으로 정적 생성될 것이다. 하지만 외부 데이터를 먼저 페치 하지 않으면 HTML을 렌더링 할 수 없는 경우도 있다. 빌드 시점에 파일 시스템에 액세스하거나, 외부 API를 페치 하거나, 혹은 데이터베이스를 쿼리해야 하는 경우다. 이런 경우에는 어떻게 해야할까? getStaticProps를 사용하여 정적 생성하기 페이지 컴포넌트를 익스포트 할 때 getStaticProps라는 비동기 함수를 함께 익스포트해주면 된다. 그러면 프로덕션 빌드 시점에 이것이 실행되고 내부에서 외부 데이터를 페치 하여 페이지에 props로 보낸다. export default function Ho..

Next.js에는 두 가지 형태의 프리렌더링이 있다. 정적 생성(Static Generation) 과 서버 사이드 렌더링(Server-side Rendering). 이 두 형태의 차이점은 페이지의 HTML을 생성하는 시점이다. 정적 생성이란? 빌드 시점에 HTML을 생성하는 프리렌더링 방식이다. 그리고 프리 렌더링된 HTML은 각 요청에 재사용된다. 서버 사이드 렌더링 각 요청마다 HTML을 생성하는 프리렌더링 방법이다. 개발 모드에서는 모든 요청에 대해 페이지가 프리 렌더링된다. 이는 정적 생성 시에도 적용되어 개발이 더 쉬워진다. 프로덕션 모드로 전환하면 정적 생성은 원래대로 빌드 시 한 번만 수행된다. 페이지 마다 다르게? Next.js를 사용하면 각 페이지에 사용할 프리렌더링 형태를 선택할 수 ..

프리렌더링은 Next.js에서 가장 중요한 개념 중 하나다. Next.js는 기본적으로 모든 페이지를 프리렌더링한다. 이것은 Next.js가 각 페이지의 HTML을 미리 생성한다는 것을 의미한다. 클라이언트 사이드의 자바스크립트가 모든 작업을 수행하진 않는다. 프리렌더링은 성능과 SEO를 개선하는데 도움이 된다. 생성된 각각의 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 브라우저에서 페이지가 로드 되면 해당 자바스크립트 코드가 실행되어 페이지가 인터랙티브한 상태가 된다. (이 과정을 Hydration이라고 한다.) 프리렌더링이 진행되고 있는지 확인하기 다음 단계를 통해 프리렌더링이 진행되고 있는지 확인해볼 수 있다. 브라우저에서 자바스크립트를 비활성화한다. 이 페이지(이 튜토리..

본 글에서는 프로필 페이지를 스타일링하고 코드를 다듬어 보겠습니다. components/layout.module.css 업데이트 레이아웃과 프로필 사진의 내용을 다음과 같이 바꿉니다: .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-direction: column; align-items: center; } .backToHome { margin: 3rem 0 0; } styles/utils.module.css 생성 두번째로, 여러 컴포넌트에서 재사용할 수 있는 CSS 유틸리티 class 세트(텍스트 스타일용)를 만들어 보겠습니다. styles/utils.module.c..

Global Styles 전역 CSS를 로드하고 싶다면 , 다음 내용으로 pages/_app.js라는 파일을 만들자: export default function App({ Component, pageProps }) { return ; } App 컴포넌트는 애플리케이션의 모든 페이지를 감싸는 최상위 React 컴포넌트이다. 페이지 간 이동시 상태를 유지하고 싶거나 전역 스타일을 추가하고 싶다면 활용된다. _app.js를 추가할 때는 개발 서버를 꼭 다시 시작해야 한다. 전역 CSS 추가하기 오직 pages/_app.js에서만 전역 CSS 파일을 추가할 수 있다. 이유는 전역 CSS가 페이지의 모든 요소에 영향을 주기 때문이다. 홈에서 /posts/first-post 페이지로 이동하는 경우 홈의 글로벌 스타..