たくさんの自由帳 Next.js リメイク版
Next.js / Tailwind CSS / unified で出来ている。
- Node.js
- v20.9.0 以降？
- LTS の最新版を入れておけば良さそう
- 本番環境へデプロイするならその環境のNode.jsのバージョンも確認してね
- このリポジトリをクローンします
- クローンしたフォルダ内でターミナルを立ち上げます
- 以下を実行します（初回時）
npm i
- 開発サーバーを立ち上げます
npm run dev
- (多分)
localhost:3000をブラウザで開きます - スマホで確認したい場合は
ローカルIPアドレス:3000で見れるはずipconfig？ifconfig？でIPアドレスの確認ができると思います
マークダウンで書きます。
contentフォルダ内postsフォルダへマークダウンのファイルを作成することで、記事を作ることが出来ます。
また、Next.jsのキャッシュ機能を利用し、できる限りマークダウン→HTMLの変換回数が少なくなるようになっています。
その影響で開発サーバーを立ち上げて記事を開いても、リロードしても反映されないことがあります。
その場合は スーパーリロード（force refresh / force reload） を試してみてください。多分キャッシュが消えるはず。
対応している記法は以下です
- CommonMark
- GitHub Flavored Markdown
- CommonMark ではテーブル作れないので
- HTML 埋め込み
- シンタックスハイライト（shiki）
追加で以下の機能を自前で実装しています
- リンクカード
[]()の場合はカッコの文字が優先されます- URL を直接書いたらリンクカードになります
<script>の埋め込み- コードブロックのコピー
- 画像の遅延読み込み（
loading="lazy"） - 見出しに id 属性付与
MarkdownからHTMLにしたあと、できる限り自分でJSX (HTML)を描画するようになっています。
<MarkdownRender/>参照。
期待通りに動いているか確認するテストコードが存在します。
__test__フォルダ参照。
vitest + testing-library/react を利用しています。
以下のコマンドでテストコードを実行できます。
npm run test本番環境でビルドして開発サーバーを立ち上げます。
next/linkのプリフェッチ機能、Google Analytics、pagefindの検索機能とかは本番ビルドしか動かないので
静的書き出しをします
npm run deployそのあと、静的書き出し結果を指定して開発サーバーを起動します。
npm run startpagefindを利用して、静的サイトでも全文検索が出来るようになっています（不思議！）
検索結果の対象になるのは、app/posts/[blog]/page.tsxだけです。理由はdata-pagefind-bodyを付けているのがそのファイルだけなので。
他の画面も検索対象にしたい場合はdata-pagefind-bodyを付けてください。
全文検索がつきましたが、もちろんこのサイトは静的サイトとして配信できます。
サーバーでのレンダリング（Server Side Rendering）機能は使っていないので、
全て静的サイト（Static Site Generation）として書き出せます。
以下のコマンドを叩くと
- すべてのページの html 書き出し
- OGP 画像の生成
- サイトマップとか
- pagefind のインデックス が行われます。
CPU 使用率が書き出し中は 100% で張り付くけどしゃあない。
npm run deploy
outフォルダに成果物が入っています。
このフォルダを公開すればいいと思います。
.envファイルに公開先の URL などの値を入れています。
EnvironmentTool.tsから値を参照できるようにしています。
| 名前 | 説明 |
|---|---|
| SITE_BASE_URL | WebサイトのURLのドメインまで。https://takusan.negitoro.dev/みたいな。 |
| SITE_NAME | サイト名です。<title>タグとかで使われます。 |
| GITHUB_REPOSITORY_URL | GitHubのリポジトリです。記事本文ページのGitHubで開くで使われます。 |
| GA_TRACKING_ID | Google アナリティクスのGA4の測定IDです。 |
| GOOGLE_SEARCH_CONSOLE | Google Search Consoleの所有権確認のために、HTML タグのcontentの値を入れてください。任意なので無くても動くはず。 |
| NO_INDEX_MODE | 検索結果にでないように、<meta>タグでnoindexを指定したい場合は true を入れる。任意です。 |
| DISABLE_OGP_IMAGE | OGP 画像を配信しない場合は true。<head>から OGP 画像の URL を消します。任意です。 |
Netlify （ビルドは GitHub Actions でやってホスティングは Netlify）とAmazon S3 + Amazon CloudFrontの2種類があります。
Netlifyのビルド機能はなんかこのリポジトリだと動かなくなったので、GitHub Actions書きました。
もし使わない場合はActionsの画面で無効にしたいワークフローを押して、Disable workflowを押すことで無効にできます。
必要なシークレットはこの2つです
| 名前 | 値 |
|---|---|
| NETLIFY_AUTH_TOKEN | Netlify のアカウント画面 > Applications > New access tokenから生成する |
| NETLIFY_SITE_ID | Netlify のサイト詳細画面 > Site configuration > Site ID をコピー |
詳しくは昔書いたのでそっち見てください：
https://takusan.negitoro.dev/posts/github_actions_netlify/
必要なシークレットはこの4つです。
OpenID Connectを使う方法で認証するのでちょっとややこしいです。（アクセスキー使うように直してもいいんじゃない？）
| 名前 | 値 |
|---|---|
| AWS_CLOUDFRONT_DISTRIBUTION | Amazon CloudFrontのディストリビューションのIDです |
| AWS_REGION | リージョン、多分東京でいいはず？ ap-northeast-1 |
| AWS_ROLE | IAM ロールのARNの値です |
| AWS_S3_BACKET | ビルド成果物を保存するS3 バケットの名前です |
詳しくは書いたので見てください：
https://takusan.negitoro.dev/posts/aws_sitatic_site_hosting/
試験的にCloudFormationを書きました。cloudformation.yamlファイルがそれです。
https://takusan.negitoro.dev/と大体同じインフラで構築できるはずです。
S3を配信するCloudFrontディストリビューション- 成果物を入れる
S3バケット S3とCloudFrontを繋ぐバケットポリシー、OriginAccessControlURLに/index.htmlが付いてなくてもアクセスできるようにするCloudFrontFunction
↑は全部CloudFormationがやってくれて、カスタムドメインだけ自分でやってください。
パラメーターですが
| パラメーター名 | 説明 |
|---|---|
| BucketName | S3バケット名。命名規則はS3に準拠します。 |
| OriginAccessControlDescription | OACの説明。名前はバケット名の{バケット名}.s3.{リージョン}.amazonaws.comになります |
| CloudFrontComment | CloudFrontのコメント欄 |
| CloudFrontFunctionCreateOrReuse | CreateかReuse。Createなら新規作成/index.htmlを付与するCloudFrontFunctionがすでにある場合はReuse |
| CloudFrontFunctionName | Createならこれから作るCloudFrontFunctionの名前。ReuseならすでにあるCloudFrontFunctionの名前 |
| CachePolicyCreatedOrManaged | CloudFrontのキャッシュポリシー。デフォルトはキャッシュ最適化 |
outフォルダを静的サイト公開サービスに渡すだけでよいはずです。
https://takusan.negitoro.dev/posts/cloudflare_pages_next_js/
__test__vitest+testing-library/reactを使ったテストです- 今のところマークダウンが描画されるかくらいしか見ていません
- .github/workflows
- GitHub Actions にやらせる作業を書いたファイルです
- GitHub の Web 上で編集することをおすすめします
- app
- 画面遷移時のページや共通レイアウト
- Android の Fragment みたいな
- content
- 記事の Markdown とか書き出し時に呼び出す JSON とか
- components
- 共通して使うコンポーネント
- public
- アイコン等のリソース
- src
- components でも app でもないTypeScriptファイルの置き場所
- 記事読み込みクラスとか
- styles/css
- Tailwind CSS でちょっと書いた、記事本文とか
- .env
- 環境変数。サイトの URL など