Next.js 10으로 블로그를 만드는 방법

Next.js가 무엇인가요?

Next.js은 React을 기반으로 하는 정적 사이트 생성기(SSG)입니다.

공식 웹사이트에 따르면:

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Gatsby 대신 Next.js를 선택하는 이유는 무엇입니까?

Vercel 최근 출시된 Next.js 10 , 강력함과 단순성의 놀라운 조합.

인기 있는 라이벌Gatsby은 많은 기능과 다양한 플러그인을 제공하지만 GraphQL의 오버헤드와 강제 사용은 일부 사용자에게 과도한 엔지니어링으로 간주될 수 있습니다.

Gatsby는 여전히 유효한 도구를 대표하며, 늘 그렇듯이 트레이드 오프와 개인 취향의 문제입니다.

작은 한걸음

Vercel은 프로젝트의 템플릿으로 사용할 여러 가지examples를 제공합니다.

좋은 출발점은 확실히 blog-starter 이며, 이는 실제로 here에서 볼 수 있습니다.

다음을 실행하여 설치할 수 있습니다.

npx create-next-app --example blog-starter blog-starter-app
# or
yarn create-next-app --example blog-starter blog-starter-app

TypeScript를 선호하는 경우:

npx create-next-app --example blog-starter-typescript blog-starter-app
# or
yarn create-next-app --example blog-starter-typescript blog-starter-app

blog-starter-app를 프로젝트 이름으로 바꾸십시오.

다음과 같이 로컬 미리보기를 살펴볼 수 있습니다.

cd <your-project-folder>

npm run dev

검색http://localhost:3000하면 결과가 표시됩니다.

이미 꽤 멋져 보이지 않나요?

Next.js 블로그 스타터, 로컬 미리 보기

하나의 거대한 도약

선호하는 편집기(예: Visual Studio Code)에서 프로젝트를 열면 다음 폴더 구조가 표시됩니다.

Next.js 블로그 스타터, 폴더 구조

가장 중요한 폴더는 다음과 같습니다.

_posts , *.md 파일의 게시물(*.mdx도 지원됨)

components , UI용 React 구성 요소

pages , 마법이 일어나는 특수 폴더, 여기에 있는 파일 및 폴더는 프로젝트 구조와 라우팅을 제공합니다(자세한 내용은 아래 참조)

public , 자산이 보관된 경우

블로그의 게시물은 그에 따라 정적 페이지를 빌드하기 위해 Next.js에서 사용하는 메타데이터가 포함된 Markdown 파일입니다. 표지 이미지 또는 홈페이지에 게시된 발췌문과 같은 정보가 여기에 표시됩니다.

예를 들면 이 글...

Next.js 블로그 스타터, 샘플 게시 파일

...다음과 같이 렌더링됩니다.

Next.js 블로그 스타터, 샘플 게시물 미리보기

오른쪽 두번째 별

Next.js에는 pages라는 특수 디렉토리에서 하위 폴더와 파일을 감지하여 그에 따라 경로를 생성하는 파일 시스템 기반 라우팅이 있습니다.
pages를 살펴보겠습니다.

Next.js 블로그 스타터, 페이지 폴더

다음 파일로 구성됩니다.

index.js는 사이트

의 홈페이지입니다.

_app.js 응용 프로그램 전체에 적용할 스타일과 같은 사용자 정의 도입 가능

_document.js 응용 프로그램을 캡슐화하는 전체 HTML 문서에서처럼 문서를 재구성할 수 있습니다

.

[slug].js는 지정된 게시물을 나타내며 동적 라우팅

을 활용하므로 이름에 []가 포함됩니다.
_post 폴더에 Markdown 파일로 게시물을 생성하면 파일 이름이 암시적으로 게시물의 슬러그를 결정합니다. 파일 이름이 hello-world.md 인 경우 슬러그는 hello-world 입니다.

Next.js는 상대 경로pages/blog/[slug].js를 사용하여 /blog/:slug 경로를 생성합니다. 이 경우에는 /blog/hello-world 가 됩니다.

자세한 내용은 this documentation을 참조하십시오.

그리고 아침까지 직진

자유롭게 components 폴더를 탐색하고 필요에 맞게 변경하십시오. 그것들은 단순한 React 구성 요소이기 때문에 아마도 친숙해 보일 것입니다.

결론

Next.js는 독선적이며 처음에는 이상하게 느껴질 수 있지만 우아한 학습 곡선과 우아하고 미니멀한 API 디자인으로 벨트에 추가할 경이로운 도구가 됩니다.

개인적인 취향은 제쳐두고, Next.js는 확실히 시간을 투자할 가치가 있습니다.

The mystery of life isn't a problem to solve, but a reality to experience.

― Frank Herbert, Dune