### はじめに

Next.js でのブログ開設の続きです。
[前回](https://tatsumaru-blog.com/articles/blog-by-nextjs-1)までで、Next.js で SSG する準備が整いました。

### Page 作成

前回`getStaticProps`で取得したデータを Component に渡し、ページを作っていきます。
 
前回決めたように、public/contents/[日付]/blog.md に記事を書き溜めていきます。

```md
---
id: "1"
meta:
 title: "Next.jsでJAMStackな爆速ブログサイトを作りました（前編）"
 category: tech
 date: "2021-11-28"
 desc: "NextJs,react-markdown,typescriptでJAMStackな爆速ブログサイトを作りました。Static Site Generation設定、環境構築編"
 tags:
 - name: Next.js
 icon: nextdotjs
 - name: Typescript
 icon: typescript
 - name: Web開発
 icon: circleci
 - name: JAMstack
 icon: jamstack

 time: "7分"
---

### はじめに

ブログを開設しようと思いたちました（2 年ぶり 3 度目 w）。
技術のキャッチアップや書評、雑記など、今の自分の考えや経験を書き溜めていく場にしていきます。

### 要件

今まで何度もブログを開設しては放置して、サーバー代やドメイン代をドブに捨ててきたので、今回は必ず継続できるように以下を重視します
.
.
.
```

---で囲まれた部分と以降の記事部分が、getStaticProps 内で`gray-matter`によってパースされ、ReactComponent の props の中に渡されます。
※[前編の getStaticProps 部分の実装参照](https://tatsumaru-blog.com/articles/blog-by-nextjs-1#123)
 
console.log で Component に渡されたデータの中身を確認してみます。
![console](console-log.png)

これらデータをコンポーネント内で以下のように表示します。

```tsx
const Article: React.FC<ContentType> = (props) => {
 // ContentTypeは記事情報の型
 return (
 <Parts.Section>
 <TitleBlock>
 　{/* props.meta内にgray-matterで取得した記事のデータがある */}
 <Parts.Title>{props.meta.title}</Parts.Title>
 <ArticleInfo>
 更新日:{props.meta.date}　　
 文字数:{props.words}字
 </ArticleInfo>
 </TitleBlock>
 </Parts.Section>
 )
```

これでひとまず、ページにデータを表示させるための最低限の実装ができました。
次は [react-markdown](https://github.com/remarkjs/react-markdown)と[react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) を用いてマークダウン形式の記事を表示していきます。

### マークダウン記事の表示

react-markdown の基本的な形は下記のような形で、コンポーネントにマークダウンを渡すことで、マークダウンの文法に従って、HTML に変換してくれます。

```jsx
実装例;
import React from "react";
import ReactMarkdown from "react-markdown";
import ReactDom from "react-dom";

ReactDom.render(
 <ReactMarkdown># Hello, *world*!</ReactMarkdown>,
 document.body
);
```

```html
出力
<h1>Hello, world!</h1>
```

今回の実装では、

```tsx
<ReactMarkdown>{props.content}</ReactMarkdown>
```

とすることで記事を出力することができます。
ただしこのままでは、単純に HTML 化して出力されるだけなので、見やすい記事ではありません。
![マークダウン出力 1](mark-before.png)

せめて、コードの出力はいい感じにしたいですね。。。
ReactMarkdown の components で各タグをカスタマイズすることができます。
`react-syntax-highliter`を使いマークダウンの code タグをいい感じに表示するのと、a タグに対して、target="\_blank" を付与しています。

```tsx
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
.
.
.
<ReactMarkdown
 components={{
 code: ({ inline, className, children }) => {
 // 言語とマッチ
 const match = /language-(\w+)/.exec(className || "");
 // 言語マッチかつinlineでない場合、Syntax Highlightする
 return !inline && match ? (
 <SyntaxHighlighter
 style={vscDarkPlus}
 language={match[1]}
 PreTag="div"
 >
 {String(children).replace(/\n$/, "")}
 </SyntaxHighlighter>
 ) : (
 // inlineの場合別途スタイル適用
 <code
 style={{
 background: "#F0F0F0",
 color: "#F0566E",
 padding: "4px",
 }}
 >
 {children}
 </code>
 );
 },
 // aタグにtarget="_blank"を付与
 a: (props) => (
 <a href={props.href} target="_blank" rel="noreferrer">
 {props.children}
 </a>
 ),
 }}
>
 {props.content}
</ReactMarkdown>;
```

これでマークダウン部分も実装終了です。

### Netflify を使ってデプロイ

最後にインターネット上に公開していきましょう。
以前、Gatsby.js を使ったブログで Netflify でドメイン管理とホスティングを行なっていたのでそのまま使用します。

1. まずは Netlify に[ログイン](https://www.netlify.com/)します。
2. ログイン後、Sites 内の New site from Git から使っている Git サービスを選択します。
 僕の場合は Gitlab です。
 ![netlify-1](netlify-1.png)

3. デプロイするレポジトリを選択。
 ![netlify-2](netlify-2.png)

4. デプロイするブランチを選択。
 ![netlify-3](netlify-3.png)

5. デプロイ時に必要なコマンドがあれば追加。自分の場合はデフォルトで OK。
 さらに環境変数などの設定があれば、Show advanced から設定
 ![netlify-4](netlify-4.png)

6. 環境変数設定。
 Google Tag Manager などはここで設定する。その他、NODE や NPM のバージョンは予約語になっているので別途設定必要な場合は[公式](https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables)を参照してください。
 ![netlify-5](netlify-5.png)

7. デプロイ
 Deploy site をクリックしてデプロイ開始。
 数分で完了します。

この設定で git 上の選択したブランチにプッシュすることで自動的にデプロイされます。
簡単な設定で`CI/CD`も実現できて良いですね。

### 速度確認

デプロイが完了したので、JAMStack が噂通り速いのか、爆速と噂の阿部寛さんの HP と速度比較してみます。
![abehiroshi](abehiroshi.gif)
![tatsumaru-blog](tatsumaru-blog.gif)

阿部寛さんの HP の方が少し早い気がします。。
あとはスタイルが当たる前、一瞬 HTML だけの時間がありますね。(styled-component の弊害かな。。)
とはいえ最速と噂される阿部寛さんの HP に対して大健闘だと思うので、これ以上の速度チューニングはやりません。

以上、お疲れ様でした！

### はじめに

ブログを開設しようと思いたちました（2 年ぶり 3 度目 w）。
技術のキャッチアップや書評、雑記など、今の自分の考えや経験を書き溜めていく場にしていきます。

### 要件

今まで何度もブログを開設しては放置して、サーバー代やドメイン代をドブに捨ててきたので、今回は必ず継続できるように以下を重視します。

1. 記事を書くことのハードルを下げまくる。

 → 簡単に記事が書けて、公開も自動化する

2. ブログ用のフレームワークやテーマを使用せず、自由にカスタマイズできる。

 → 自分で 0 から作り愛着を持つ！

これら要件は、以前 Wordpress と Gatsby.js を用いてのブログ運営に失敗した原因でもあります。Wordpress は記事の作成がめんどくさくて続かなかったし、 Gatsby は `gatsby-starter-lumen` というテーマを使っていたのですが、カスタマイズが容易ではなかったし、放っておくと大量の バージョンエラー が出るのが辛かったです。

### 技術選定

というわけで、Next.js を使って、[JAMstack](https://dyno.design/articles/what-is-jamstack/)な構成でブログサイトを構築していきます。

Next.js であれば、上記の要件を満たせるかつ、自分の技術的なキャッチアップになるし、React は慣れているのでちょうど良いです。
また、この機に JAMStack という比較的新しい Web 開発のアーキテクチャの考え方をしっかり自分のものにしようと思います。Gatsby.js を触ったときにちらっとは触れましたが、まだまだ浅く実装に落とし込めないので、概念を理解した上で実装まで落とし込みます！

早速進めていきます。色々試行錯誤の上、package.json は以下のような形に落ち着きました。

```json
package.json
{
 "name": "tatsumaru-blog",
 "private": true,
 "scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint"
 },
 "dependencies": {
 "babel-plugin-styled-components": "^1.13.3",
 "gray-matter": "^4.0.3",
 "modern-css-reset": "^1.4.0",
 "next": "12.0.4",
 "react": "17.0.2",
 "react-dom": "17.0.2",
 "react-gtm-module": "^2.0.11",
 "react-markdown": "^7.1.0",
 "react-syntax-highlighter": "^15.4.5",
 "styled-components": "^5.3.3"
 },
 "devDependencies": {
 "@types/node": "16.11.9",
 "@types/react": "17.0.35",
 "@types/react-gtm-module": "^2.0.1",
 "@types/react-syntax-highlighter": "^13.5.2",
 "@types/styled-components": "^5.1.15",
 "eslint": "7.32.0",
 "eslint-config-next": "12.0.4",
 "typescript": "4.5.2"
 }
}
```

`gray-matter` がマークダウンデータをパースするためのもので、`react-markdown`と`react-syntax-highlighter` はマークダウンを HTML に変換し、かつスタイルを定義できます。また今回はスタイリングに `styled-components` を使用しています。

### 構成

ディレクトリは下記のようにしました。
`pages` 以下がそのまま URL になる形です。[公式ドキュメント](https://nextjs.org/docs/basic-features/pages)

```sh
tatsumaru-blog % tree -L 2
.
├── README.md
├── node_modules
│ ├── .....
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.tsx
│ ├── articles
│ └── index.tsx
├── public
│ ├── contents
│ ├── favicon.ico
│ ├── icons
│ └── vercel.svg
├── src
│ ├── blog-config.tsx
│ ├── components
│ └── types
├── styles
│ ├── Home.module.css
│ └── globals.css
└── tsconfig.json
```

あとは public/contents 以下に md 形式の記事を置いてます。ビルド時にこの記事を取得して html に変換します。
最初この contents を src 以下に置いていたのですが、public 以下に置いた方が、[next/image](https://nextjs.org/docs/api-reference/next/image) による画像表示が圧倒的に楽なのでこれに落ち着きました。

```sh
tree public/contents -L 2
public/contents
├── 2021-11-28_【技術】Next.jsブログ開設
│ └── blog.md
│ └── csr.png
│ └── ssg.png
│ └── ssr.png
├── 2021-11X_【技術】firebase
│ └── blog.md
├── 2021-11XX_【書評】武器としての資本論
│ ├── blog.md
├── 2021-11XX_【書評】世界は贈与でできている
│ ├── blog.md
└── 2021-11XX_【思考整理】社会人を５年間経験して
 └── blog.md
```

### JAMStack

JAMStack とは、Javascript、API、Markup の略で、SSG(Static Site Generation)を前提に、Web サイトのパフォーマンスやセキュリティを担保しつつ、Javascript や API を用いて動的なコンテンツを扱うことができるアーキテクチャです。
 
Next.js では `getStaticProps` と `getStaticPaths` を使うことで、簡単に SSG(Static Site Generation)を実現できます。
 
SSG は従来の Web サイトと「ページの生成タイミング」が異なります。従来は SSR(Server Side Renderring)のようにページをサーバーサイドで構築してクライアントに反映するか、SPA(Single Page Application)に代表される CSR(Client Side Renderring) のように Javascript によって動的にクライアント側でページを作成していました。いずれもユーザーからのリクエストを受け取った後に、ページを生成しています。
対して、SSG はビルドのタイミングでデータを取得しページを作成しておきます。そのためデータ取得にかかる時間を削減でき、表示スピードを飛躍的に上げることができます。

- SSR
 リクエストを受けて、サーバー側でページ作成して渡す

 ![ssr](ssr.png)

- CSR
 リクエストを受けて、サーバーから該当ページに必要なデータを渡してクライアント側でページ作成
 ![csr](csr.png)

- SSG
 リクエストを受けると、サーバー側でビルド時にあらかじめ作成しておいたページを渡す
 ![ssg](ssg.png)

`getStaticProps` はビルド時のページ作成のタイミングでデータを取得しページ内に反映するための関数です。この関数からページ生成に必要なデータを props をキーとして export することで、データが React Component 側に渡されます。
 

公式の説明

> If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

また同時に、`getStaticPaths`を使用することで、`[id].tsx` などの動的なルーティングに対しても、各ルーティングのページに合わせて必要なデータを取得することができます。

下記は、各記事ページである`pages/articles/[id].tsx`の該当部分の実装です。

```ts
[id].tsx;

export const getStaticPaths: GetStaticPaths = async () => {
 // contentsのパス取得
 const contentsDirectory = path.join(process.cwd(), "public/contents");

 // 記事ごとのフォルダ取得
 const dirNames = fs.readdirSync(contentsDirectory);

 const paths = dirNames.map((blogs) => {
 const blogFolderPath = path.join(contentsDirectory, blogs);

 // 記事コンテンツ取得
 const fileContents = fs.readFileSync(blogFolderPath + "/blog.md", "utf8");

 // 記事コンテンツをパース
 const md = matter(fileContents);
 return {
 params: {
 id: md.data.id, // 記事idをpathとする
 },
 };
 });
 return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
 const contentsDirectory = path.join(process.cwd(), "public/contents");
 const dirNames = fs.readdirSync(contentsDirectory);
 const contents: ContentType[] = dirNames.map((blogFolder) => {
 // 記事コンテンツをRect内で使う形でデータ整理
 const blogFolderPath = path.join(contentsDirectory, blogFolder);
 const fileContents = fs.readFileSync(blogFolderPath + "/blog.md", "utf8");
 const md = matter(fileContents);
 return {
 blogFolder,
 meta: md.data.meta,
 content: md.content,
 id: md.data.id,
 };
 });
 // params!.idのidはgetStaticPathsで入れたもの.
 // 複数記事から該当の記事IDの記事を取得する
 const data = contents.find((c) => c.id === params!.id);
 return {
 props: {
 ...data,
 },
 };
};
```

### 後半へ

文字数が多くなってきたので、記事を分けます。
[後半](https://tatsumaru-blog.com/articles/2)は、`react-markdown` 周りの実装と、`netlify` を使ってデプロイしていきたいと思います。

【技術】Next.jsでJAMStackな爆速ブログサイトを作りました（後編）

【技術】Next.jsでJAMStackな爆速ブログサイトを作りました（前編）

カテゴリー

アーカイブ

たつまる