NextJS로 가격 인하 블로그 만들기

나는 트위터를 보냈는데 솔직히 한 시간도 안 되어 블로그를 만들었다.이 글을 쓰는 것은 블로그를 인터넷에 올리는 것보다 나에게 더 많은 시간을 썼다.
한 시간도 안 돼요.나는 처음으로 NextJS를 사용했는데, 그것은 매우 좋다.아니요, 저는 이미 썼어요.🔥블로그를 만들고 운영하는 데 얼마나 걸릴지 보고 싶을 뿐입니다.
)
나는 내가 취한 절차를 최선을 다해 설명할 것이다.

If you don't want to follow the tutorial download the Source code.

나는 https://t.co/XsFjLYP7MU의 슈퍼 팬이기 때문에 위탁 관리와 배치에 낭비할 시간이 없다는 것을 의미한다.
나는 몇 가지 항목이 Zeit and Now로 운행되고 있다. 솔직히 나는 그것을 좋아한다. 그것은 사용하기 쉽다. 만약 네가 GatsbyJS와 같은 제3자를 삽입한다면 그것은 매우 강할 것이다.이번엔 좀 다른 걸 해보고 싶지만 Zeit로 내 프로젝트를 위탁 관리하고 배치하는 걸 좋아하는데 왜 안 해봐Contentful?처음 사용해 봤는데 신기하다고 말해줄게.
NextJS
시작해보도록 하겠습니다.
다음 명령을 실행합니다.

mkdir my-blog && cd my-blog

npm init -y && npm install react react-dom next --save

If you're wondering -y means you don't have to answer all the npm init questions

이제 package.json 파일에서 scripts 를 다음으로 바꿉니다.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

계속해서 서버 npm run dev 를 시작하려고 시도하면, NextJS가 /pages 폴더를 찾으려고 하기 때문에 오류가 발생할 것입니다.
그래서 프로젝트 운영의 근본에서 이 문제를 해결합시다.

mkdir pages && touch pages/index.js

이제 npm run dev를 실행하고 http://localhost:3000에 애플리케이션에 액세스할 수 있어야 합니다.
만약 모든 것이 예상대로 진행된다면, 당신은 다음과 같은 오류를 보게 될 것입니다.

The default export is not a React Component in page: "/"

괜찮다계속 전진하다.

우리들의 첫눈pages/index.js 파일에서 다음 코드를 붙여넣습니다.

import React from 'react'

export default function Index() {
  return (
    <div>
      ✍️ My blog about Books
    </div>
  )
}

보기http://localhost:3000 내 책에 관한 블로그를 보실 수 있을 거예요.

아이템 획득
NextJS에는 getInitialProps라는 함수가 첨부되어 있다.우리는 도구를 Index 부품에 전달할 수 있다.
더 간단한 일부터 시작하자.어셈블리 끝에서 다음 코드를 입력합니다.

import React from 'react'

export default function Index() {
  return (
    <div>
      ✍️ My blog about Books
    </div>
  )
}

+ Index.getInitialProps = () => {
+   return {
+     blogCategory: 'Books'
+   }
+ }

여기서 blogCategory 도구를 구성 요소에 전달하고 구성 요소를 다음과 같이 변경합니다.

export default function Index(props) {
  return (
    <div>
      ✍️ My blog about {props.blogCategory}
    </div>
  )
}

// ...

페이지를 새로 고치면, 페이지의 외관은 완전히 같아야 하지만, blogCategory 의 값을 변경하면, 새 값으로 보기를 변경하는 것을 볼 수 있습니다.시험해 보다.

// ...

Index.getInitialProps = () => {
  return {
    blogCategory: 'ReactJS'
  }
}

이제 뷰 컨텐트는 다음과 같습니다.✍️ ReactJS에 관한 블로그입니다.
대박, 다음!

동적 노선
따라서 블로그를 만들려면 동적 루트가 필요합니다. 우리가 불러올 파일의 루트에 따라 이 파일은 우리의 게시물 데이터를 포함합니다..md에 액세스하는 경우 http://localhost:3000/post/hello-world라는 파일을 로드하고자 합니다. 이를 위해 다음 단계를 수행합니다.
먼저, NextJS는 똑똑해서 hello-world.md 파일을 만들 수 있습니다. 이 파일을 계속 만들 수 있습니다.

mkdir pages/post

Note the folder and file needs to be created inside /pages

현재 [slug].js에 /post라는 파일을 만듭니다. 이것은 괄호가 있는 것과 같습니다.
이 파일에는 게시물 제목, 내용 등을 표시할 게시물 템플릿을 만들 것입니다.
다음 코드를 계속 붙여넣으면 1분 안에 확인합니다.

import React from 'react'

export default function PostTemplate(props) {
  return (
    <div>
      Here we'll load "{props.slug}"
    </div>
  )
}

PostTemplate.getInitialProps = async (context) => {
  const { slug } = context.query

  return { slug }
}

URL에서 추출[slug].js을 위해 방문context.query했습니다. 이것은 저희 파일slug을 호출했기 때문입니다. 예를 들어 ID가 포함된 제품 페이지의 블로그 글을 표시하는 것이 아니라 [slug].js라는 파일을 만들어서 방문할 수 있습니다[id].js.
만약 방문context.query.id한다면, "Hello World"를 불러올 것입니다.
너무 좋아, 우리 계속하자!

가격 인하 파일 로드
첫 번째 단계에서는 http://localhost:3000/post/hello-world 파일을 만듭니다.

mkdir content && touch content/hello-world.md

.md 파일에 다음을 붙여넣습니다.

--------
title: "Hello World"
date: "2020-01-07"
--------

This is my first blog post!

너무 좋아요.현재 우리는 이 파일의 내용을 불러와서 hello-world.md 파일의 props에 전달해야 한다.
변경 행의 주석을 확인하려면 다음과 같이 하십시오.

// ...

PostTemplate.getInitialProps = async (context) => {
  const { slug } = context.query
  // Import our .md file using the `slug` from the URL
  const content = await import(`../../content/${slug}.md`)

  return { slug }
}

현재 우리는 데이터가 생겨서 [회색질( )을 사용하여 우리의 파일PostTemplate 데이터를 분석할 것이다.

frontmatter data is the information between --- in our .md file

설치frontmatter하려면:

npm install gray-matter --save

이제 데이터를 분석하여 gray-matter 도구에 전달할 수 있습니다.

Don't forget to import matter

import matter from 'gray-matter'

// ...

PostTemplate.getInitialProps = async (context) => {
  // ...

  // Parse .md data through `matter`
  const data = matter(content.default)

  // Pass data to the component props
  return { ...data }
}

대단합니다. 현재 우리는 구성 요소 PostTemplate 중의 data 에 접근할 수 있을 것입니다.페이지를 새로 고쳐 봅시다...아, 탁!props 오류가 발생했습니까?
걱정하지 마십시오. NextJS 설정을 추가해서 파일을 불러오는 것을 알려야 합니다. 이것은 프로젝트가 실행되는 루트 디렉터리에 있는 간단한 과정입니다.

touch next.config.js

새 파일에 다음 코드를 붙여넣습니다.

module.exports = {
  webpack: function(config) {
    config.module.rules.push({
      test: /\.md$/,
      use: 'raw-loader',
    })
    return config
  }
}

이 패키지는 TypeError: expected input to be a string or buffer를 사용하므로 설치해야 합니다.

npm install raw-loader --save

Don't forget to restart your application

이제 구성 요소를 변경하여 새 구성 요소를 받습니다.md.

// ...
export default function PostTemplate({ content, data }) {
  // This holds the data between `---` from the .md file
  const frontmatter = data

  return (
    <div>
      <h1>{frontmatter.title}</h1>
    </div>
  )
}

페이지를 새로 고치면 Hello World를 볼 수 있습니다.
렌더링이 부족한 경우raw-loader:

export default function PostTemplate({ content, data }) {
  // This holds the data between `---` from the .md file
  const frontmatter = data

  return (
    <div>
      <h1>{frontmatter.title}</h1>

      <p>{content}</p>
    </div>
  )
}

좋아, 이거 대박이다. 너는 이것이 나의 첫 번째 박문이라는 것을 볼 수 있을 거야!
https://www.npmjs.com/package/gray-matter
가격 인하 양식
이제 우리는 우리의 가격 인하 파일을 잘 보여줄 수 있다. 우리는 우리의 게시물 파일에 형식을 추가하고 계속 변경할 수 있다props.

--------
title: "Hello World"
date: "2020-01-07"
--------

### Step 1

- Install dependencies
- Run locally
- Deploy to Zeit

응, 격식은 예상한 것이 아니라 원시 텍스트일 뿐이야.
이 문제를 해결하려면 를 사용하여 가격 인하 형식을 처리하겠습니다.

npm install react-markdown --save

이제 content 구성 요소를 업데이트합니다.

import React from 'react'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'

export default function PostTemplate({ content, data }) {
  // This holds the data between `---` from the .md file
  const frontmatter = data

  return (
    <div>
      <h1>{frontmatter.title}</h1>

      <ReactMarkdown source={content} />
    </div>
  )
}

이렇게우리 여기까지!최종 코드react-markdown를 다운로드할 수 있습니다.
만약 네가 이 글을 좋아한다면, 만약 네가 너의 인터넷과 공유하고 나를 주목할 수 있다면, 나는 감격해 마지 않을 것이다👏