Next.jsでblogを作成する 2024

Next.jsでblogを作成する

Nomad Dev Life を書いていく為に、まずは記事を書く場所となるblogをNext.jsで作っていきます。これまでGatsbyの経験はあるものの、Next.jsは初めて。加えて、フロントエンドやサイト構築はほとんど経験がないので、ツールやフレームワークを確認していきながら作っていきます。

今回は、出来上がったblogをVPSにdeployします。取り敢えず自動化とか頑張らずに、VPSのサーバー上でNext.jsのプロジェクトをbuildし、出力されたHTMLをnginxで見れるようにします。

Next.js Starter

Next.jsにはStarterという必要なものが揃ったテンプレートがあるので、それを使っていきます。今回はStarterとしてTailwind CSS Blogを使うことにしました。Tailwind CSSもよく分かっていませんが、困ったらチェックするくらいの勢いでやっていきます。先のページの下の方に"Quick Start Guide"があるので、そのとおりにやっていきます。

まずはnodeのversionを決め、StarterのGitHubのリポジトリをローカルにコピーします。Tailwind CSS Blogのinstructionではdegitを使ってコピーしていますが、degitがすでにdeprecatedということなので、今回はdegitをforkしたtigedを使いました。

$ nvm use v18.18.2
$ npm install -g tiged
$ tiged 'timlrx/tailwind-nextjs-starter-blog' nomad-dev-life.net

これで、"nomad-dev-life.net"というフォルダにgit repoの内容が展開されます。

blogの設定

次に、このblogのタイトルや言語等の設定を変更していきます。Tailwind CSS Blogの下の方に記載されているinstructionをそのまま実行していきます。

最初はblog siteのタイトルやAuthor、SNSのアカウント等のメタ情報の編集です。アカウントを持っていないSNSの行はコメントアウトしました。

$ cd nomad-dev-life.net
$ vim data/siteMetadata.js

/** @type {import("pliny/config").PlinyConfig } */
const siteMetadata = {
  title: 'Nomad Dev Life',
  author: 'Nomad Dev Life',
  headerTitle: 'Nomad Dev Life',
  description: 'A blog of Nomad Dev Engineer',
  language: 'ja-jp',
  theme: 'system', // system, dark or light
  siteUrl: 'https://nomad-dev-life.net',
  // siteRepo: '',
  siteLogo: `${process.env.BASE_PATH || ''}/static/images/logo.png`,
  socialBanner: `${process.env.BASE_PATH || ''}/static/images/twitter-card.png`,
  // mastodon: 'https://mastodon.social/@mastodonuser',
  // email: 'address@yoursite.com',
  // github: 'https://github.com',
  // x: 'https://twitter.com/x',
  // twitter: 'https://twitter.com/Twitter',
  // facebook: 'https://facebook.com',
(...snip...)

なお、newsletterを表示しない場合はnewsletterをコメントアウトし、さらにapp/apiディレクトリを削除する必要があります。そうしないと、buildの際にエラーが出ます。

次に、Authorの情報の編集です。これもアカウントを持っていないものは削除しました。

$ vim data/authors/default.mdx

---
name: Nomad Dev Life
avatar: /static/images/avatar.png
occupation: Programmer
---

個人開発で得たことや、生活について書いていきます。

projectsData.tsはDemoページの上部のナビゲーションにある"Project"の内容です。現時点では何もProjectがないので、"[]"にしました。

$ vim data/projectsData.ts

interface Project {
  title: string
  description: string
  href?: string
  imgSrc?: string
}

const projectsData: Project[] = []

export default projectsData

最後は上部のナビゲーションのリンクです。"Projects"は何もないので、リンクから削除しました。

$ vim data/headerNavLinks.ts

const headerNavLinks = [
  { href: '/', title: 'Home' },
  { href: '/blog', title: 'Blog' },
  { href: '/tags', title: 'Tags' },
  { href: '/about', title: 'About' },
]

export default headerNavLinks

記事を追加する

まず初めに、既存のmdxファイルや"nested-route"フォルダはDemo用なので、これらを削除します。そして、新しいmdxファイルを追加します。mdxファイルの名前は何でも良さそうですが、日付とタイトルを入れておくと良いと思います。

$ vim data/blog/2024-10-27-create-blog-with-nextjs.mdx

---
title: Next.jsでblogを作成する 2024
date: '2024-10-27'
tags: ['next.js']
draft: false
summary: 2024年にNext.jsでblogを作成する
---

## Next.jsでblogを作成する
まずは記事を書く場所となるblogを作ります。これまでGatsbyの経験はあるものの、Next.jsは初めて。加えて、フロントエンドやサイト構築はほとんど経験がないので、ツールやフレームワークを確認していきながら作っていきます。
(...snip...)

ライブラリのインストールとローカル実行

作成した記事をローカルで確認するために、ライブラリをインストールしてローカルで実行します。

$ yarn
$ yarn dev

これでhttp://localhost:3000にアクセスすると、blog一覧が表示され、追加した記事のタイトルが表示されます。タイトルをクリックすると、追加した記事全体が表示されます。ここまで確認できたら、一先ずGitHubにpushしておきます。

Deploy

冒頭に書いたように、先ほど作成したプロジェクトをVPS上でgit cloneした後、buildします。

$ EXPORT=1 UNOPTIMIZED=1 yarn build

成功すると、outというディレクトリが作成され、その下にコンテンツが生成されています。

Let's Encrypt

ついでにhttpsでアクセスできるようにしておきます。まずはVPS上のnginxにport:80でコンテンツを公開する設定を入れます。

server {
  listen 80;

  server_name nomad-dev-life.net;
  root /usr/share/nginx/nomad;
  index index.html;
  try_files $uri $uri.html /$uri /index.html;
}

rootがnomad-dev-life.net/outじゃないのは、dockerでvolume mountするからなので、気にしないでください。これでnginxをreloadし、ブラウザからhttp://nomad-dev-life.netでアクセスできることを確認します。これでLet's Encryptに申請できる状態になります。

$ sudo certbot certonly --webroot -w /path/to/nomad-dev-life.net/out -d nomad-dev-life.net
[sudo] password for ...

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Requesting a certificate for nomad-dev-life.net

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/nomad-dev-life.net/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/nomad-dev-life.net/privkey.pem
This certificate expires on 2025-01-25.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

あとは、先ほどのnginxの設定をTLS用に変更して、nginxをreloadします。

server {
  listen 443 ssl;
  ssl_certificate     /etc/letsencrypt/live/nomad-dev-life.net/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/nomad-dev-life.net/privkey.pem;

  server_name nomad-dev-life.net;
  root /usr/share/nginx/nomad;
  index index.html;
  try_files $uri $uri.html /$uri /index.html;
}

これで、https://nomad-dev-life.netにアクセスし、blogを表示することができました。

おわりに

Next.jsでblogサイトを構築しました。静的コンテンツが出力できるところまでいければ何とかなる…と思って初めましたが、無事構築できました。この後、デザインや画像なども調整していこうと思いますが、何にせよサクっと構築できたのは嬉しい😄