Next로 블로그를 만드는 방법.js
27235 단어 reactbeginnersjavascripttutorial
저는 사갈이라고 하는데 Fabric에서 소프트웨어 엔지니어로 일하고 있습니다.나는 나의 생각과 경험을 나누고 싶다.속도가 매우 빠른 블로그를 만드는 것이 나의 꿈 프로젝트이다. 나는 블로그를 여러 번 쓰기 시작했지만 중도에 실패했다.Next 릴리즈 이후.js의 9.3은 SSG (정적 사이트 생성) API를 통해 정적 페이지를 쉽게 생성할 수 있습니다.이 블로그에서 우리는 Next.js를 사용하여 처음부터 블로그 사이트를 구축할 것이다.우리가 코드를 작성하기 전에, 나는 한 문제에 대답하고 싶다.
이 박문에서
getStaticProps() 방법입니까?getStaticPaths() 방법입니까?왜 내가 다음을 선택했는지게이츠비?
여기서는 Gatsby 나쁘다고 말하고 싶지 않아요.다음.js와 게이츠는 각각 우세하다.그러나 나는 게이츠비에게 추가 설정과 다음 단계를 해야 한다는 것을 발견했다.우리는 그것을 필요로 하지 않는다.그 밖에 개발의 고통을 덜기 위해 게이츠비 플러그인도 많이 있다.
아래에 비교할 수 있는 아주 좋은 문장이 한 편 있다.js 및 Gatsy 특성.
프로젝트 설정
프로젝트 폴더를 만들고 npm로 초기화합니다.
mkdir my-personal-blog
cd my-personal-blog
npm init --y
npm init --y 명령은 루트 레벨에서 package.json 파일을 생성합니다.프로젝트에
next, react 및 react-dom를 설치합니다.next.js 버전이 9.3 이상이어야 합니다. 그렇지 않으면 SSG API가 작동하지 않습니다.npm install next react react-dom --save
npm install uuid unified remark-html remark-highlight.js remark-parse gray-matter --save-dev
uuid- RFC4122 uuid 를 생성하는 데 사용됩니다.
통일 - 문법 트리를 통해 내용을 해석, 검사, 변환하고 서열화하는 인터페이스.
비고 html-비고 플러그인, 태그를 html
메모가 강조 표시됩니다.js-remark 플러그인, 하이라이트로 코드 블록을 강조합니다.js.
비고 해석 - 확인 표시된 비고 플러그인
회색 - 문자열 또는 파일의 앞면을 해결합니다.
package.json를 열고 다음 스크립트를 추가합니다."scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
응용 프로그램 구조
코드 작성을 시작하기 전에 다음과 같이 폴더 구조를 계속 설정합니다.
/my-personal-blog/
|--/components
|--/node_modules
|--/contents
|--/pages
|----/index.js
|----/blog
|------/[slug].js
|--/styles
|----/global.css
|--/utils
|--package.json
블로그 컨텐츠 만들기
프로젝트의
hello-world.md 폴더에 contents 파일을 추가하고 hello-world.md 라는 파일을 만들고 다음 태그를 추가합니다.잠시 후, 우리는 사이트에 이 내용을 보여줄 것이다.---
title: My first blog
slug: hello-world
date: "31-05-2020"
---
Pellentesque condimentum velit vel justo rutrum, sit amet commodo diam tincidunt. Nunc diam massa, interdum ut aliquet at, scelerisque ac ex. Integer cursus sem ac pretium posuere. Ut at odio nulla. Phasellus nec ante luctus, egestas dui id, maximus dui. In aliquam elit sit amet sollicitudin luctus. Nunc nec leo quis ante vestibulum egestas. In dignissim libero vitae congue bibendum. Sed iaculis eros a leo pellentesque, et ultrices leo malesuada. Nullam ultrices rutrum accumsan. Pellentesque tempus sapien et vestibulum placerat.
Donec ultrices in tortor eget facilisis. Pellentesque orci risus, vulputate consequat fermentum eget, euismod sed nulla. Sed luctus sapien quis magna lobortis porttitor. In porttitor nibh id tincidunt imperdiet. Suspendisse ultricies tellus dolor, et gravida tortor vehicula quis. Maecenas tempus est sit amet congue rhoncus. Vivamus vitae felis lacinia, viverra nibh id, pulvinar eros. In viverra venenatis ligula, vitae efficitur felis vehicula vitae. Vestibulum feugiat vel risus iaculis tincidunt.
pages/index.js.import React from "react";
import Link from "next/link";
function IndexPage(props) {
return (
<div>
<h1>Blog list</h1>
<ul>
{props.blogs.map((blog, idx) => {
return (
<li key={blog.id}>
<Link href={`/blog/${blog.slug}`}>
<a>{blog.title}</a>
</Link>
</li>
);
})}
</ul>
</div>
);
}
// This function gets called at build time on server-side.
export async function getStaticProps() {
const fs = require("fs");
const matter = require("gray-matter");
const { v4: uuid } = require("uuid");
const files = fs.readdirSync(`${process.cwd()}/contents`, "utf-8");
const blogs = files
.filter((fn) => fn.endsWith(".md"))
.map((fn) => {
const path = `${process.cwd()}/contents/${fn}`;
const rawContent = fs.readFileSync(path, {
encoding: "utf-8",
});
const { data } = matter(rawContent);
return { ...data, id: uuid() };
});
// By returning { props: blogs }, the IndexPage component
// will receive `blogs` as a prop at build time
return {
props: { blogs },
};
}
export default IndexPage;
index.jsx의 문서에는 많은 내용이 있다.여기에서 우리는 IndexPage라는 기능 구성 요소를 만들었는데 블로그 데이터를 getStaticProps 방법의 도구로 받아들일 것이다.코드 작성 내부getStaticProps() 방법을 이해하기 전에 getStaticProps()를 설명하고 싶습니다.
아바이스
🎉 getStaticProps 여기 있습니다.내 말을 기억해라, 이것은 다음 단계다.제이스가 게이츠비를 이겼다.이제 Next를 사용하여 정적 사이트를 생성할 수 있습니다.js, 혼합 서버 쪽 렌더링 (SSR) + 정적 사이트 생성 (SSG) 방법을 유지합니다.많이 좋아졌어요.다음 걸로 옮길게요.jstwitter.com/vercel/status/…
2020년 3월 9일 오후 19:22
비셀
@ 비셀
다음.js 9.3:
◆ 차세대 정적 사이트 생성(SSG) 지원
◆ 미리 보기 모드
◆ 글로벌 스타일에 내장된 Sass 가져오기
◆ 구성 요소 수준 스타일용 내장형 Sass 모듈
◆ 404의 자동 정적 최적화
◆ 32kB 작은 작동 시 (15kB gzip)
https://t.co/Z4DK39xcvC https://t.co/5GEZBGEjRF
26
138
getStaticProps() 메서드는 무엇입니까?
간단하게 말하자면, 이 방법은 구축할 때만 실행되고, 도구를 페이지 구성 요소에 전달하여 미리 보여 주며, 검색 매개 변수나 HTTP 헤더 같은 요청한 데이터를 받지 않습니다.
주로 구축할 때 데이터를 얻는 데 사용되며 원본은 API, 정적 파일, 심지어 데이터베이스 조회를 할 수 있다.
성능 측면에서 볼 때 페이지를 미리 구축하면 사용자에게 추가 묶음 js를 전달할 필요가 없습니다.이것은 페이지의 상호작용 시간을 크게 증가시킬 것이다.
IndexPage 구성 요소로 돌아가서 getStaticProps()에서 작성한 코드를 찾으면 내장fs 모듈로 _content 현재 디렉터리에서 읽기process.cwd() 폴더를 요청하는 것을 볼 수 있습니다.fs.readdirSync(path) 폴더에 나열된 모든 파일을 가져옵니다.그래서 나는 가격 인하 파일만 필터한다.나는
_content에서 교체해서 이 파일의 내용을 files에 전달했다. 이것은 앞의 태그 파일을 분석하고 gray-matter와 data 속성을 가진 me 대상을 되돌려준다.이 content 방법에서 우리는 내용을 필요로 하지 않기 때문에 나는 그것을 건너뛰었지만 특정한 블로그 페이지에서 우리는 그것을 필요로 한다.반환
getStaticProps()을 통해 IndexPage 구성 요소는 구축할 때 { props: blogs } 형식으로 수신blogs됩니다.prop 구성 요소에서 나는 블로그 도구를 비추고 IndexPage 표시가 있는 모든 블로그를 보여줌으로써 우리가 특정한 블로그를 내비게이션할 수 있도록 할 것이다.
검색 매개 변수에서 slug를 받아들여 블로그 내용을 화면에 보여줄 때가 되었다.
Link 폴더에 [slug].js라는 파일을 만들고 다음 pages/blog/ 구성 요소를 봅시다.가격 인하 파일에 따라 모든 블로그 게시물을 정태적으로 생성하려면 생성해야 할 경로를 지정해야 한다.이를 위해, 우리는 비동기 함수 BlogPostPage 를 내보내야 한다.// file: pages/blog/[slug].js
import React from "react";
function BlogPostPage(props) {
return (
<div>
<h1>{props.blog.title}</h1>
<section dangerouslySetInnerHTML={{ __html: props.blog.content }}></section>
</div>
);
}
// pass props to BlogPostPage component
export async function getStaticProps(context) {
const fs = require("fs");
const html = require("remark-html");
const highlight = require("remark-highlight.js");
const unified = require("unified");
const markdown = require("remark-parse");
const matter = require("gray-matter");
const slug = context.params.slug; // get slug from params
const path = `${process.cwd()}/contents/${slug}.md`;
// read file content and store into rawContent variable
const rawContent = fs.readFileSync(path, {
encoding: "utf-8",
});
const { data, content } = matter(rawContent); // pass rawContent to gray-matter to get data and content
const result = await unified()
.use(markdown)
.use(highlight) // highlight code block
.use(html)
.process(content); // pass content to process
return {
props: {
blog: {
...data,
content: result.toString(),
}
},
};
}
// generate HTML paths at build time
export async function getStaticPaths(context) {
const fs = require("fs");
const path = `${process.cwd()}/contents`;
const files = fs.readdirSync(path, "utf-8");
const markdownFileNames = files
.filter((fn) => fn.endsWith(".md"))
.map((fn) => fn.replace(".md", ""));
return {
paths: markdownFileNames.map((fileName) => {
return {
params: {
slug: fileName,
},
};
}),
fallback: false,
};
}
export default BlogPostPage;
getStaticPaths () 방법은 무엇입니까?
이 방법은 구축할 때 HTML로 보여야 하는 경로 목록을 정의합니다. 만약 페이지에
getStaticPaths() 같은 동적 경로가 있다면 이 목록은 매우 유용할 것입니다.blog/[slug].js 정적 사전 렌더링Next.js에 지정된 모든 경로입니다.FromgetStticPaths() 메소드 강제 반환getStaticPaths() 및 path 키.fallback가 fallback라면 구축할 때false 돌아오지 않은 경로가 404페이지가 됩니다.
여기서git 저장소를 찾을 수 있습니다: https://github.com/sagar-gavhane/my-personal-blog
결론
getStaticPaths()로 블로그 사이트를 만드는 것은 매우 간단하다.우리는 파일 읽기, 내부 해석 Next.js, 사용 getStaticProps() 방법으로 미리 렌더링 경로를 만드는 등 몇 가지 절차를 따라야 한다.나는 많은 사람들이 이 강력한 기능을 이용하여 정적 페이지를 미리 과장하려고 시도하는 것을 발견했다.요즘js는 getStaticPaths()v9에서 증량 정적 재생 기능을 발표했다.4 이것은 우리가 무한히 많은 페이지를 정적으로 미리 렌더링하는 데 도움을 줄 것이다.참조 링크
읽어주셔서 감사합니다.나는 네가 이 글을 좋아하길 바란다. 마음대로 좋아하고, 평론하거나, 너의 친구와 이 글을 공유해라.
Next.js API의 checkout 공식 문서 사이트를 더욱 깊이 이해해야 한다.
Reference
이 문제에 관하여(Next로 블로그를 만드는 방법.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sagar/building-a-blog-with-next-js-253텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
