이것은 내가 발표할 strapi,nextjs,tailwind에 관한 시리즈 블로그의 첫 번째 블로그이다.저희 서류 가방/블로그 게시물 사이트를 다시 만들 것입니다. 이 과정에서strapi,nextjs,tailwind의 기초 지식을 배울 것입니다.자바스크립트의 기본 지식을 알고 반응하면 제myportfolio를 볼 수 있습니다. 그리고 이 블로그 글과 이 시리즈가 곧 발표할 블로그 글에 관심을 가져야 합니다.나는 네가 이 시리즈에서 얻은 것이 있기를 바란다.
나는 당신의 기계에 nodejs가 설치되어 있다고 가정합니다. 나는 npm가 아닌 실을 사용할 것입니다. 만약 당신이 실을 사용하고 싶다면, 전 세계적으로 실을 설치할 것을 확보하십시오.

npm i -g yarn

스텔라피

그것은 머리 없는 내용 관리 시스템이다.Headless는 HTML이나 CSS가 아닌 데이터만 제공한다는 의미입니다.이것은 매우 강력하다. 왜냐하면 우리는 우리의 관심 데이터만 얻을 수 있기 때문에, 우리는 UI 논리를 작성하여 그것을 잘 나타낼 수 있다.웹, 이동, 데스크톱 등 모든 플랫폼에서 같은 API 포트를 사용하여 데이터를 요청할 수 있습니다.
또한 컨텐츠를 손쉽게 관리할 수 있는 관리 사용자 인터페이스를 제공합니다.이제 그만하고 실제 행동을 봅시다.
새로운strapi 프로그램 실행 만들기

 yarn create strapi-app nameofyourapp
 or
 npx create-strapi-app my-project

이것은 설치 형식에 대한 맞춤형 선택을 요구할 것입니다. 템플릿에 sqlite를 개발 데이터베이스로 선택하지 않고, 우리는 생산에서postgres를 사용할 것입니다.
그것은 우리를 위해 일련의 파일을 만들 것이니, 우리는 지금 어떤 파일도 걱정할 필요가 없다.
그럼 빨리 뛰어요.

 yarn develop

먼저 관리 UI를 구축하고 기본적으로 서버를 시작합니다http://localhost:1337.
현재 브라우저에서 이 링크를 계속 열면 처음으로 로그인 관리자에게 사용할 자격 증명을 요구합니다.어쨌든 우리는 관리 인터페이스를 보아야 한다.
strapi에서 우리는 먼저 내용 형식을 만들고 이를 데이터 구조나 테이블 모델로 간주합니다.이제 사용자 이름, 이력서, 그림을 가진 작가와 같은 간단한 내용 유형을 만듭시다.
컨텐트 유형 생성기로 이동하여 새 컬렉션 유형 만들기를 클릭하여 컬렉션 유형의 작성자를 명명하고 필드를 추가합니다.save (저장) 단추를 누르면 서버를 다시 시작하고 Author (저자) 를 새 모음집 형식으로 사용자 옆에 추가합니다. 사용자는 인증에 사용할 기본 모음집 형식입니다.
이제 HTTP 요청을 통해 가상 작성자 데이터를 추가한 다음 작성자 집합 데이터로 이동해서 새 작성자 추가 단추를 누르십시오.데이터를 작성하여 저장하고 발표하면 작성자의 집합 형식에서 새로 추가된 작성자를 볼 수 있습니다.
먼저 이 데이터를 얻기 위해서, 우리는 반드시 이 내용들을 공개해야 한다.
설정->캐릭터->공개, 검색 및 완성 권한을 확인하고 저장을 눌러주세요.
이제 http://localhost:1337/authors 에 간단한 get 요청을 보냅니다. 이런 결과를 얻으셔야 합니다.

Strapi는 기본적으로 미디어 라이브러리에 업로드된 그림을 처리하지만, 설정을 변경할 수 있습니다. 지금은 간단하게 유지할 수 있습니다.이 프로젝트에 대해rest가 아니라graphql을 사용하고 싶습니다.graphql을 사용한 적이 없다면 걱정하지 마십시오. 아주 간단합니다.인터넷에서 찾을 수 있는 몇 가지 장점을 제공합니다. 현재, strapi 플러그인을 설치하면, strapi 서버에 graphql 요청을 할 수 있습니다.
빨리 뛰어라.

 yarn strapi install graphql
 or
 npm run strapi install graphql

설치에 성공한 후, 우리는 http://localhost:1337/graphqlgraphql 놀이공원을 개방할 수 있어야 한다
get이 요청한graphql에서query와 다른 변수를 사용합니다.모든 작가를 얻기 위해 간단한 검색어를 작성합시다.

 query {
  authors {
    id
    created_at
    username
    bio
    avatar {
      url
    }
  }
}

우리는 다른 블로그에서strapi의 내용 유형과 관계를 더욱 토론할 것이며, 지금은Nextjs와Tailwind를 어떻게 설정하는지 중점적으로 토론할 것이다.
#Nextjs
이것은 react 프레임워크로 서버 사이드 렌더링 (SSR) 과 정적 사이트 생성 (SSG) 을 매우 간단하게 합니다.일반적인create-react 응용 프로그램에서 모든 내용은 사용자 브라우저의 클라이언트가 계산하는데 이것은 성능과 SEO에 좋지 않다.그래서 우리는 정적 사이트 생성을 사용할 것이다. 왜냐하면 서류 가방과 블로그 사이트는 큰 변화가 없기 때문이다.
SSR과 SSG 사이의 차이점은 SSG에서nextjs는 구축 과정에서 모든 데이터를 추출하고 모든 페이지를 만든다는 것이다.누군가가 당신의 페이지에 방문을 요청할 때, 그들은 구축 과정에서 구축된 페이지를 얻을 것이며, 백엔드 호출을 할 필요가 없습니다.이것은 사이트의 성능을 향상시키고 백엔드 서버의 부하를 줄일 수 있으며, SSR nextjs에서는 클라이언트의 모든 요청이 백엔드 서버에 요청을 하고 서버에 페이지를 만들어서 클라이언트에게 제공한다.
typescript로nextjs를 설정합니다

yarn create next-app --typescript
or
npx create-next-app@latest --typescript

이것은 모든 의존 항목을 설치하고 간단한 페이지를 설정합니다

yarn dev
or 
npm run dev

dev goto의 다음 서버를 시작합니다http://localhost:3000.

미풍

이 프레임워크는 유틸리티 우선 CSS 프레임워크로 UI 구축을 쉽고 빠르게 합니다.
이제 Tailwindcss를 그룹에 추가합니다

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
or
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

전역 CSS 파일에 이 코드 세그먼트 추가

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

만약 vs 코드를 사용한다면tailwindcss 확장자를 설치할 수 있습니다. 이것은 클래스 이름을 기억할 필요가 없는 멋진 자동 완성 기능을 제공합니다.
이제 색인에서 모든 태그를 삭제합니다.tsx 파일과tailwind에서 온 간단한 클래스를 테스트하여 텍스트의 굵기와 기울임꼴을 만듭니다.

import type { NextPage } from 'next';

const Home: NextPage = () => {
  return (
    <div>
      <p className='font-bold italic'>This is tailwindcss</p>
    </div>
  );
};

export default Home;

다음 블로그 글에서, 우리는strapi 내용 유형에 대한 더 많은 내용을 토론하고, 서류 가방/블로그 페이지에 필요한 모든 내용 유형을 추가할 것입니다. 현재 설정에 대해 궁금한 것이 있으면 토론에서 저에게 알려주십시오