728x90 🧱 언어 모음집160 [Next.js] Post 페이지 다듬기 title 게시물 페이지에 추가 pages/posts/[id].js에서 게시물 데이터를 사용하여 태그를 추가해보겠습니다. 최상단에 Head를 import 하고 구성 요소를 아래와 수정하여 태그를 추가합니다. // Add this import import Head from 'next/head' export default function Post({ postData }) { return ( {/* Add this {/* Keep the existing code here */} ) } 날짜 형식 지정 1️⃣ 날짜 형식을 지정하기 위해서 date-fns 라이브러리를 사용합니다. 터미널을 열고 아래 코드를 입력하여 라이브러리를 설치합니다. $ npm install date-fns 2️⃣ 다음으로는 componen.. 2022. 2. 20. [Next.js] Render MarkDown Render MarkDown 1️⃣ 마크다운 콘텐츠를 렌더링 하기 위해서는 remark 라이브러리를 사용합니다. (터미널을 열고 아래와 같이 입력하여 설치합니다.) $ npm install remark remark-html 2️⃣ lib/posts.js 최상단에 아래 코드를 삽입합니다. import { remark } from 'remark' import html from 'remark-html' 3️⃣ getPostData()를 아래와 같이 수정하여 remark 합니다. 여기서 중요한 점은 for을 사용 해야 하기 때문에 async 키워드를 추가 했습니다. 이를 통해 데이터를 비동기적으로 가져옵니다. export async function getPostData(id) { const fullPath = .. 2022. 2. 20. [Next.js] getStaticProps 구현 getStaticProps 구현 1️⃣ 주어진 id로 게시물을 렌더링 하기 위해서는 필요한 데이터를 가져와야 합니다. 그러려면 lib/posts.js를 다시 열고 getPostData 아래에 다음 기능을 추가합니다. (id를 기반으로 데이터를 반환합니다.) export function getPostData(id) { const fullPath = path.join(postsDirectory, `${id}.md`) const fileContents = fs.readFileSync(fullPath, 'utf8') // Use gray-matter to parse the post metadata section const matterResult = matter(fileContents) // Combine the.. 2022. 2. 20. [Next.js] getStaticPaths 구현 getStaticPaths 구현 우선 파일을 설정해보겠습니다. - pages/posts 디렉터리에 내부에 [id]. js라는 파일을 생성합니다. - pages/posts 내부에 있는 first-post.js는 더 이상 사용하지 않기 때문에 제거합니다. 1️⃣ pages/posts/[id]. js 파일 내부에 다음 코드를 삽입합니다. (.. 은 나중에 작성합니다.) import Layout from '../../components/layout' export default function Post() { return ... } 2️⃣ lib/posts.js를 열고 맨 아래에 다음 getAllPostIds 함수를 추가합니다. 이 함수는 posts 디렉터리의 파일 이름 목록(. md 제외)을 반환합니다. exp.. 2022. 2. 20. [Next.js] 동적 경로 페이지 경로는 외부 데이터에 따라 다름 이전 포스팅에서는 페이지 콘텐츠가 외부 데이터에 의존하는 경우를 다루었습니다. (getStaticProps를 사용하여 인덱스 페이지를 렌더링 하는 데 필요한 데이터를 가져왔습니다.) 이번 포스팅에서는 각 페이지 경로가 외부 데이터에 의존하는 경우에 대해서 정리하겠습니다. Next.js를 사용하면 외부 데이터에 의존하는 페이지의 경로를 정적으로 생성할 수 있습니다. 이렇게 하면 Next.js에서 동적 URL이 활성화됩니다. 동적 경로로 페이지를 정적으로 생성하는 방법 우리는 블로그 게시물에 대한 동적 경로를 만들려고 합니다. - 각 게시물이 /posts/[id] 경로를 가지기를 원합니다. 여기에서 [id]는 posts 디렉터리 아래에 있는 마크다운 파일의 이름입니다... 2022. 2. 20. [Next.js] 요청 시 데이터 가져오기 요청 시 데이터 가져오기 빌드 시간이 아닌 요청 시간에 데이터를 가져와야 하는 경우 서버 측 렌더링(SSR)을 사용 할 수 있습니다. 서버 측 렌더링을 사용하려면 페이지에 getStaticProps 대신 getServerSideProps를 사용 해야 합니다. getServerSideProps 사용하기 getServerSideProps는 아래와 같은 형태로 사용합니다. export async function getServerSideProps(context) { return { props: { // props for your component } } } getServerSideProps는 요청 시 호출 되기 때문에 해당 매개변수(context)에는 요청별 매개변수가 포함됩니다. getServerSidePro.. 2022. 2. 18. [Next.js] getStaticProps 구현 getStaticProps 구현 1️⃣ 먼저 각 마크다운 파일의 Meta-Data를 구문 분석 할 수 있는 gray-matter를 설치 합니다. $ npm install gray-matter 2️⃣ 파일 시스템에서 데이터를 가져오기 위한 간단한 라이브러리를 만듭니다. 🥕 최상위 루트에 lib 디렉토리를 생성합니다. 🥕🥕 lib 디렉토리 내부에 posts.js라는 파일을 추가합니다. (내부에 아래 코드를 삽입합니다.) import fs from 'fs' import path from 'path' import matter from 'gray-matter' const postsDirectory = path.join(process.cwd(), 'posts') export function getSortedPost.. 2022. 2. 18. [Next.js] 블로그 데이터 블로그 데이터 이제 파일 시스템을 사용하여 앱에 블로그 데이터를 추가 해보겠습니다. 각 블로그 게시물은 마크다운 파일이 됩니다. - 프로젝트 최상위에 posts라는 디렉토리를 생성합니다. (pages/posts와 다른 폴더 입니다.) - posts 폴더 안에 pre-rendering.md, ssg-ssr.md 파일을 추가합니다. 더보기에 있는 코드를 각 파일에 붙여넣기 합니다. 더보기 posts/pre-rendering.md --- title: 'Two Forms of Pre-rendering' date: '2020-01-01' --- Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. Th.. 2022. 2. 18. [Next.js] 데이터가 있거나 없는 정적 생성(SSG) 데이터가 있거나 없는 정적 생성(SSG) 정적 생성은 데이터 유무에 관계 없이 수행 할 수 있습니다. 지금까지 만든 모든 페이지는 외부 데이터를 가져올 필요가 없었습니다. 이러한 페이지는 앱이 프로덕션용(배포용)으로 빌드 될 때 자동으로 정적으로 생성됩니다. 그러나 일부 페이지의 경우 먼저 외부 데이터를 가져오지 않고는 HTML을 렌더링 하지 못할 수 있습니다. 파일 시스템에 엑세스 하거나 외부 API를 가져오거나 빌드 시 데이터베이스를 쿼리해야 할 수도 있습니다. 이런 경우 Next.js는 데이터를 사용한 정적 생성(getStaticProps)을 즉시 지원합니다. 데이터를 사용한 정적 생성 : getStaticProps Next.js에서 페이지 컴포넌트를 내보낼 때 async 함수를 사용하면 getSt.. 2022. 2. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음 728x90
