다음을 구축합니다.js 블로그와 우주의 GraphQL API

구축을 따라가고 싶으세요?Click here to grab the app or fork the project.
사이트를 구축할 때, 이렇게 많은 선택들이 어떤 기술을 사용할지 막을 수 없을 것이다.누가 그것을 사용할 것인지, 어떤 내용을 표시할 것인지, 그리고 그것을 유지할 것인지를 고려해야 합니다.블로그, 밴드 사이트나 전자상거래 상점을 만들 때 정적 사이트는 좋은 선택이다.정적 사이트는 과거에 대한 송가로 당시 사이트는 URL을 통해 방문한 서버의 일반ol파일일 뿐이었다.그것들이 제공하는 장점은 속도가 빠르고 검색 엔진의 최적화 효과가 좋으며 PHP 등 특정한 운행에 의존하지 않는다는 것이다.이는 서버가 보여주는 사이트에 비해 워드프레스, Drupal 또는 Ruby on Rails와 같다.
정적 사이트는 정적 자산을 이용하여 구축된 것이다.다음 문제는 이 내용을 어디에 저장하고 관리하는가입니다.만약 당신이 단독 사이트 관리자라면, 내용은 Git repo의 파일일 수 있습니다.고객이나 다른 개발자가 콘텐츠를 관리하려면 CMS(콘텐츠 관리 시스템)가 필요합니다.CMS는 블로그 게시글 및 음악회 날짜와 같은 웹 사이트 컨텐츠를 저장하는 서비스입니다.
우주 좌표계!
Next.js SSG의 경우 "headless" fashion에서 CMS를 사용합니다.일련의 무두 CMS 제품을 시도한 후에 나는 우주를 계속 사용했다.Cosmic은 직관적이고 강력하며 사용하기 쉬운 서비스로 신속하게 시작하고 실행할 수 있습니다.그것들은 many starter apps을 제공하여 미리 보거나 갈라놓을 수 있습니다.예를 들어 나는 다음을 선택했다.js 정적 블로그, 한 사이트의 생산 버전이 5분 안에 실행됩니다.

기술 선택

Next.js과 GraphQL은 정적 사이트 개발에 대해 이야기할 때 제 개인적인 선택입니다.다음js는 혼합 반응 프레임워크로 정적 사이트 구축을 지원한다.필요할 때 server-side rendered pages을 구축할 수 있습니다.2020년 React 응용 프로그램을 구축하는 가장 좋은 방법 중 하나가 될 수 있도록 대형 커뮤니티가 지원하는 루트를 처리합니다.네가 들은 또 다른 기술은 Gatsby.js이다.GaphQL을 선택하는 대신 GraphQL을 사용하는 것이 더 쉽지만 GraphQL을 선택하는 것이 더 좋습니다.
GraphQL을 the Cosmic NPM module에 사용하기로 했습니다.GraphQL은 서비스에서 데이터를 얻는 표준화 방법으로 CMS에서 데이터를 받아야 할 때 좋은 선택이다.Cosmic에서 사용자 정의 데이터 유형을 만들 때 GraphQL API에서 질의할 수 있습니다.GraphQL을 사용하면 특정 SDK에 대한 의존도를 줄일 수 있습니다.

지도의

For reference, I forked the example Cosmic Next.js project here.

우주 프로젝트 만들기

Cosmic에서 계정을 만들고 제품 여행을 마치면 "새 통 만들기"화면을 볼 수 있습니다.

응용 프로그램 시작 을 클릭하고 표시되는 응용 프로그램 목록에서 Next.js Static Blog을 검색하여 선택합니다.이것은 많은 일을 할 것이다.

우주통 만들기

버킷에서 건전한 데이터 형식을 만들고 블로그

에 사용

프레젠테이션 내용으로 통 채우기

다음은 우주 계기판에 만들어진 통의 외관입니다.

다음js 로컬 개발

다음으로 우리가 해야 할 일은 복제 다음이다.우리의 로컬 환경의 js 코드입니다.이것은 우리로 하여금 다음을 운행할 수 있게 할 것이다.우리가 만든 시범 우주통에서 내용을 추출합니다.

git clone [email protected]:aleccool213/nextjs-cosmic-graphql-app.git

the template을 사용하여 GitHub 저장소를 만들 수도 있습니다.
새 디렉터리에 들어간 후 사용한 노드가 정확한지 확인하십시오.js 버전, NVM 사용.

nvm use v12.18.3

Yarn을 설치하고 프로젝트 종속성을 설치합니다.

brew install yarn && yarn

응용 프로그램을 실행합니다!

yarn dev

거의 다 왔어요!

우주 환경 변수

Cosmic GraphQL API를 질의하기 전에 애플리케이션이 어디에 있는지 알아야 합니다.환경 변수는 배포에 특정한 값으로 API 키 등 민감한 내용을 포함한다.
응용 프로그램이 로컬에서 작동하도록 하기 위해서, 우리는 세 가지 환경 변수를 정의해야 한다..env.local이라는 파일을 만듭니다. Git이 무시할 염려는 없습니다.

COSMIC_BUCKET_SLUG=demo-nextjs-static-blog
COSMIC_READ_KEY=77H1zN7bTktdsgekxyB9FTpOrlVNE3KUP0UTptn5EqA7T0J8Qt
# Preview secret can be anything you choose
COSMIC_PREVIEW_SECRET=iwvrzpakhaavqbihwlrv

이 값을 얻으려면 bucket의 Settings (설정) 사이드바 메뉴로 이동하여 "Basic Settings (기본설정)"를 누르십시오.yarn dev을 사용하여 애플리케이션 다시 실행

우리 일어났어!

상자에서 보다

정적 생성의 Next에 대해 이야기할 때, 우리는 두 가지를 알아야 한다.js 응용 프로그램, 페이지, 루트.Pages are content which depend on external data과 routes are URL routes which depend on external data.둘 다 네가 정의한 특별한 다음 단계가 있다.js 특정 함수, getStaticProps 및 getStaticPaths.
Cosmic GraphQL API 기반 페이지 생성 내용을 포함하는 논리적인 파일은 pages/posts/[slug].js에 있습니다.

export async function getStaticProps({ params, preview = null }) {
  // Get the data from the API
  const data = await getPostAndMorePosts(params.slug, preview);
  // Convert markdown content to HTML content
  const content = await markdownToHtml(data.post?.metadata?.content || "");
  return {
    props: {
      preview,
      post: {
        ...data.post,
        content,
      },
      morePosts: data.morePosts || [],
    },
  };
}

export async function getPostAndMorePosts(slug, preview) {
  // Query for the data through the Cosmic GraphQL API using Apollo Client
  ...
  const moreObjectsResults = await client.query({
    query: gql`
      query getPostQuery(
        $bucketSlug: String!
        $readKey: String!
        $status: status
      ) {
        getObjects(
          bucket_slug: $bucketSlug
          input: {
            read_key: $readKey
            type: "posts"
            status: $status
            limit: 3
          }
        ) {
          objects {
            _id
            slug
            title
            metadata
            created_at
          }
        }
      }
    `,
    variables: {
      bucketSlug: BUCKET_SLUG,
      readKey: READ_KEY,
      status,
    },
  });

이것은 getStaticProps을 사용한 페이지의 예입니다.이것은 also used in the Index page에서 모든 블로그 글의 제목과 발췌를 얻은 것이다.pages/posts/[slug].js also contains getStaticPaths 다음을 알려주세요.루트를 생성하는 js 응용 프로그램입니다.

export async function getStaticPaths() {
  // Get all post data (including content)
  const allPosts = (await getAllPostsWithSlug()) || [];
  return {
    // Tell Next.js all of the potential URL routes based on slugs
    paths: allPosts.map((post) => `/posts/${post.slug}`),
    fallback: true,
  };
}

이 두 가지 측면을 이해한 후에 블로그는 일반적인 React 응용 프로그램일 뿐이다.

배포 중

현재 우리의 사이트는 현지에서 일하고 있으니, 우리는 그것을 Vercel에 배치할 것이다.첫 번째 단계는 Git 저장소에 코드가 있는지 확인하는 것입니다.
GitHub의 코드를 사용하는 것이 좋습니다.현재 디렉터리에 gh repo create을 만들어서 다시 구매할 수 있습니다.
GitHub repo 코드를 사용하도록 Vercel을 등록해야 합니다.GitHub 계정 GitHub CLI을 사용하여 Vercel을 등록할 수 있습니다.항목 가져오기 기능을 사용하여 GitHub에서 코드를 가져올 수 있습니다.
here
프로젝트를 가져올 때 환경 변수 COSMIC_BUCKET_SLUG, COSMIC_READ_KEY 및 COSMIC_PREVIEW_SECRET이 정의되어 있는지 확인하십시오.
배포 후 기본 Git 지점으로 전송되는 모든 작업은 Vercel에 새 버전의 웹 사이트를 배치합니다!

보너스

미리 보기

The Next.js docs on preview mode are right here.

로컬 개발과 웹 사이트를 생산에 배치하는 것은 당신의 대부분의 용례를 포함할 것입니다.또 다른 일반적인 워크플로우는 CMS에 변경 초안을 저장한 다음 로컬 시스템에서 미리 보는 것입니다.이를 위해, 우리는 우주와 우리의 다음 플랫폼에서'미리보기'모드를 사용할 것이다.js 응용 프로그램.
우리가 해야 할 첫 번째 일은 Posts 대상의 유형이 미리 볼 수 있다는 것을 우주에 알리는 것이다.게시물 설정 페이지에 미리 보기 링크를 추가합니다.

http://localhost:3000/api/preview?secret=iwvrzpakhaavqbihwlrv&slug=[object_slug]

완료되면 객체 유형 저장을 클릭합니다.
우리 지역 기계에 표시되는 게시물을 편집해 봅시다.제목 "Next.js 정적 생성 사전 렌더링 페이지 사용하기 학습"을 변경하고 "게시"대신 "초고 저장"을 누르십시오.
Save Draft 버튼
현재 발표되지 않은 변경 사항이 있습니다.yarn dev을 사용하여 로컬에서 응용 프로그램을 실행하고 "초안 저장"아래에서 "미리보기"를 누르십시오.

우리 미리보기 모드!

네트워크 연결

Note this feature requires a Cosmic paid plan

새로운 내용을 우리 블로그에 배치하는 유일한 방법은 개발자를 기본적인git 지점으로 보내는 것이다.이 조치는 Vercel이 새로운 코드를 받아들여 우리 사이트의 새로운 버전을 내놓도록 촉발할 것이다.이상적인 상황에서 우리는 우리의 콘텐츠 창작자가 같은 통제권을 가지기를 바란다.Webhook은 우리가 이 점을 할 수 있는 방식의 하나이다.
Vercel이 Cosmic의 게시물에 언제 새로운 업데이트가 있는지 알 수 있도록 인터넷 갈고리를 만듭니다.이것은 개발자가 어떤 일도 할 필요가 없이 웹 사이트의 새로운 버전을 배치할 것이다.
Vercel 프로젝트의 Git 통합 설정 페이지( )로 이동하여 Cosmic Hook이라는 새 배포 갈고리를 만듭니다.
https://vercel.com/[project]/settings/git-integration
웹 훅을 만들 때 설정이 어떻게 됩니까?
현재 우주 설정에서 우리는 이 웹 훅을 추가할 수 있다.변경 사항을 게시할 때 Cosmic notify Vercel을 추가합니다.만약 우리가 장래에 미리 보기를 하고 싶다면, 우리도 이렇게 할 수 있다는 것을 볼 수 있다.

편집/작성 및 게시!
이 점을 테스트하려면 테스트 미리 보기의 같은 게시물로 이동하여 글 끝에 내용을 추가하여 발표하십시오.Vercel에 새로운 콘텐츠를 배치하고 사이트의 실시간 버전에 배치하는 것을 볼 수 있을 것입니다!

결론

최종 사이트가 어떤 모습인지 보고 싶으세요?

Like this post? Subscribe to my email newsletter for more like it in the future.