Next.js와 함께 블로그 구축

이 기사에서는 Jekyll에서 영감을 얻은 디자인 및 구조와 함께 Next.js를 사용하여 정적 블로그 프레임 워크를 구축하도록 안내합니다. Jekyll은 액세스의 용이성과 높은 제어 성으로 유명 하며이 기사는 Next.js를 활용하고 새로운 정적 블로그 구축 솔루션을 제공하기 위해 반응하는 것을 목표로합니다. Next.js는 파일 시스템을 기반으로하며 정적 웹 사이트의 구성 프로세스를 단순화합니다.

일반적인 Jekyll 블로그 디렉토리 구조는 다음과 같습니다.

 <code>. ├─── _posts/      ...Markdown 格式的博文├─── _layouts/     ...不同页面的布局├─── _includes/    ...可复用的组件├─── index.md     ...主页└─── config.yml    ...博客配置</code>

우리의 프레임 워크는 Jekyll에서 블로그의 마이그레이션을 용이하게하기 위해이 디렉토리 구조를 가능한 한 많이 따라 게시물과 구성을 재사용 할 것입니다.

Jekyll에 익숙하지 않은 경우 일반 텍스트를 정적 웹 사이트 및 블로그로 변환하는 정적 사이트 생성기입니다. 자세한 내용은 Jekyll Quick Start Guide를 참조하십시오.

이 기사에서는 RECT의 기본 사항이 있다고 가정합니다. 그렇지 않은 경우 React Getting 시작 가이드를 참조하십시오.

설치하다

Next.js는 React를 기반으로하며 Node.js에 작성되었습니다. 따라서 Next.js, React 및 React-DOM을 추가하기 전에 NPM을 설치해야합니다.

 <code>mkdir nextjs-blog && cd $_ npm init -y npm install next react react-dom --save</code>

명령 줄에서 다음.js 스크립트를 실행하려면 package.json의 스크립트 섹션에 다음 명령을 추가해야합니다.

 <code>"scripts": { "dev": "next" }</code>

이제 npm run dev 명령을 처음으로 실행하고 무슨 일이 일어나는지 확인하십시오.

 <code>$ npm run dev > [email protected] dev /~user/nextjs-blog > next ready - started server on https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 Error: > Couldn't find a `pages` directory. Please create one under the project root</code>

컴파일러는 Project Root 디렉토리의 페이지 디렉토리가 누락되었음을 알 수 있습니다. 다음 섹션에서 페이지 개념에 대해 배울 것입니다.

페이지 개념

Next.js는 페이지 개념을 기반으로 구축되었습니다. 각 페이지는 파일 이름에 따라 경로에 매핑되는 React 구성 요소 (.js 또는 .jsx)입니다. 예를 들어:

<code>               路由----               ----- /pages/about.js         /about /pages/projects/work1.js     /projects/work1 /pages/index.js         /</code>

프로젝트 루트 디렉토리에서 페이지 디렉토리를 만들고 기본 React 구성 요소로 첫 번째 페이지 index.js를 채우십시오.

 <code>// pages/index.js export default function Blog() { return</code> Next.js 블로그에 오신 것을 <code>// pages/index.js export default function Blog() { return</code>
}

npm run dev 하여 서버를 시작하고 https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90을 방문하여 블로그를보십시오.

상자에서 우리는 다음을 얻습니다.

• Hot Reload, 모든 코드 변경에 대해 브라우저를 새로 고칠 필요가 없습니다.
• /페이지/** 디렉토리의 모든 페이지의 정적 생성.
• /public/** 디렉토리의 리소스 용 정적 파일 서비스.
• 404 오류 페이지.

404 페이지의 실제 효과를 보려면 LocalHost의 모든 경로를 방문하십시오. 404 페이지를 사용자 정의 해야하는 경우 다음.js 문서를 참조하십시오.

동적 페이지

정적 라우팅 페이지는 홈페이지, 페이지 등을 작성하는 데 사용됩니다. 그러나 모든 블로그 게시물을 동적으로 빌드하기 위해서는 Next.js의 동적 라우팅 기능을 사용합니다. 예를 들어:

<code>             路由----             ----- /pages/posts/[slug].js    /posts/1              /posts/abc              /posts/hello-world</code>

/posts /1, /posts /abc 등과 같은 모든 경로는 /posts/=GUG] .JS와 일치하며 슬러그 매개 변수는 쿼리 매개 변수로 페이지로 전송됩니다. 각 블로그 게시물에 대한 파일을 만들고 싶지 않기 때문에 블로그 게시물에 특히 유용합니다. 대신, 우리는 동적으로 슬러그를 전달하여 해당 블로그 게시물을 렌더링 할 수 있습니다.

(다음 내용은 생략됩니다. 기사의 길이가 너무 길기 때문에 원본 텍스트는 변경되지 않으며 나머지 부분은 단순화되고 사진은 유지됩니다).

블로그 API, 포함, 레이아웃, 홈페이지, 블로그 페이지, 생산 환경 배포, 개선 제안

기사의 후속 부분은 블로그 API (모든 블로그 게시물 가져 오기, 개별 블로그 게시물 가져 오기 및 구문 분석 구성), 재사용 가능한 구성 요소 (포함), 디자인 페이지 레이아웃 (레이아웃), 홈페이지 블로그 게시물 목록 및 개별 블로그 게시물 페이지 및 개별 블로그 포스트 페이지를 구현하는 방법 및 최종 제작 환경, 이주식 및 스타일의 세부 사항 등을 구현하는 방법을 구현하는 방법 및 세부 사항 등의 세부 사항 등을 구현하는 방법에 대해 자세히 설명합니다. Next.js의 기능과 기능을 기반으로 정적 사이트 생성 기능을 최대한 활용하십시오.

위 내용은 Next.js와 함께 블로그 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!