趣味はいくつかあるのですが、その中の一つにボルダリングがあります。

通常は週4の頻度で登っているのですが、わけあって12日間登れませんでした。というか12日ぶりに外に出ました。

昨日ボルダリングしたので、身体に感じた変化を羅列します

体力落ちた

これにつきる。前は落ちてもすぐトライできたのに一回登ったら5分ぐらい休憩してた。

家から一歩もでない生活をしていたら12日間でここまで落ちるのかと驚きました。

身体が重い

体重は変わっていない（引きこもり終盤不要なカロリーを摂らないようにしていた）ので、筋肉が落ちたのでしょう

ホールドが弾ける

筋肉痛

特にお尻。ここが一番衰えたところかも

身体が硬い

ストレッチは家でもしておくべきでした

左脇腹の筋肉が固くなっていたのか、とある課題に取り組んでいるとき無理やり伸ばされ激痛でした

前腕がすぐパンプする

動きが下手になって脚とか上手く使えていないからだと思います。

思っていたよりは登れた

一番心配していたことだったので、少し安心しました。

Next.jsで引き続きブログを作っています。

TwitterのTweetを貼りたくなるときもあります。ただ、Contentful の Rich Text 上に埋め込みタグをベタ書きしても当然表示されないわけです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スマイルプリキュア</p>&mdash; 橋下徹 (@hashimoto_lo) <a href="https://twitter.com/hashimoto_lo/status/340640143058825216?ref_src=twsrc%5Etfw">June 1, 2013</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを表示させるのが目標です。

方針

• （Contentful側）Rich Text でツイートのリンクを作成する

• （Next.js側）react-twitter-embed を使って埋め込みツイートを表示させる
• （Next.js側）rich-text-react-renderer を使ってtwitterのurlに対して特定のタグに変換するようにする

（Contentful側）Rich Text でツイートのリンクを作成する

書いたとおりです。テキストの部分は使わないので何でも良いです。

（Next.js側）react-twitter-embed を使って埋め込みツイートを表示させる

埋め込みタグを見るとscriptがあります。 当初はhtmlを直書きできるContent modelをContentfulに作り、それを　dangerouslySetInnerHTML でrenderしようと思っていましたが、scriptを実行できないという制約があります。

（このあたりNext.jsをもう少し理解するといい感じにできそうな雰囲気を感じる。）

（Next.js側）rich-text-react-renderer を使ってtwitterのurlに対して特定のタグに変換するようにする

1documentToReactComponents(post.content, {
2  renderNode: {
3    [INLINES.HYPERLINK]: (node, children) => {
4      if (node.data.uri.indexOf("twitter.com") !== -1) {
5        const tweetID = node.data.uri.match(/\d+$/)[0];
6        return <TwitterTweetEmbed tweetId={tweetID} />;
7      }
8      return <a href={node.data.uri}>{(node.content[0] as Text).value}</a>
9    },
10  },
11})

これでようやく埋め込むことができました。

表題の通りです。

Next.js + Contentful + Vercel でブログを作りました。

目的

衝動的に作りましたが、いくつか目的があります。

• お仕事で触っているフロントエンドのフレームワークがNext.jsなのでチュートリアルぐらいはやっておきたいなって思っていた

• ブログがほしいと漠然と思っていた

  • とはいえはてなブログで作ってもすぐ飽きそうだし、WordPress触る気もそんなに起きなかった

• 訳あって暇だった（落ち着いたら記事にしたい）

できたもの

このブログ。Contentfulの管理画面から記事の投稿や編集を行うと、Vercel上で動いているNext.jsのappがbuildされ、静的コンテンツが作られてそれらが配信されます(SSG)。コンテンツの管理はContentfulにおまかせしており、ブログの更新はContentfulの管理画面で行っていきます。表示を変えたくなったらNext.js側の実装を変えていきます。

やったこと

• Next.jsのチュートリアル

  • ほぼこれがメイン。

  • 基本のやつとTypeScript化のやつ（SEOのやつは今度進めていきたい。）

  • 英語だけど一つ一つの分量は多くないからそこまで苦にならずに進められた。

  • チュートリアルを進めていくとどんどんポイントが加算されていくの楽しい。

  • クライアントサイドで環境変数を呼び出すときはNEXT_PUBLIC_命名規則がある。

    • 後述するContentfulを呼び出すときにハマっていました。

  • Next.jsを使うメリットのひとつとしてSSR/SSGがある。これらの主な目的はパフォーマンス向上とそれにともなうSEOの向上。TTFB(Time To First Byte)という最初の1バイトが届くまでの時間という概念を知る。

• Vercelの設定

  • ホスティングサービス。 Netlify みたいなやつ。

    • RailsのチュートリアルをすすめるとHerokuにつながるように、Next.jsのチュートリアルを進めると流れるままに Vercel を使わされる。特にこだわりはないので便乗。

  • Netlifyと同じく、PRを作るとプレビューが作られるの体験いいですね。

    • DPS: Develop, Preview, and Shipって呼んでいるらしい。

  • 今でこそマージしたらデプロイが当たり前みたいな雰囲気あるけど毎回感動しちゃう。

  • 初めて使ったけどとても使いやすかった。

• Contentful

  • Headless CMS (Contents Management System)

    • フロントエンドを持たないCMS

    • Headless はフロントエンドがないことを表している。

      • フロントエンドレスじゃあかんのか？って気持ちがある。

  • UIポチポチしてどんな構造を持ちたいか設定する。

    • ユニーク制約とかnot null制約とかを設定できる

    • テーブル設計する感覚で作れる

  • 当然Next.js側でやり取りするためのライブラリがある
    • ラッパーしているだけなのでこんなAPIないかな〜って思ったら公式ドキュメントを見ればいい

  • コンテンツを更新するタイミングでbuildをさせることができる

    • VercelでbuildするためだけのWebhookを作ることが可能で、Contentfulの設定でWebhookを呼び出すことができる

    • 結果、SSGできてパフォーマンスを良くすることができる

    • なお、webhookを呼ぶタイミングについて一つ注意があります。Autosaveは外しましょう。

    • 

    • なぜなら編集中にwebhookを無限に呼び出してしまうため、一瞬でVercelの無料枠を消費しまうからです （つらい）

    • 

ふりかえり

チュートリアルでしたが、Next.jsに対する親近感をだいぶ抱きました。よかったです。 あとブログを持つことができたので、これからいろいろと発信していきたいです。