Next.js - deg84's blog

deg84's blog

Sign in Subscribe

Next.js

A collection of 6 posts

Next.jsで作っていた個人ブログをGhost(Pro)に移行した

Next.jsで作っていた個人ブログをGhost(Pro)に移行した

元々Next.jsで作っていた個人ブログをGhost Proに移行することにしました。 Next.jsのバージョンアップ速度が早く、自分でメンテし続けるのが辛くなってきていたところに、久々に記事を書いたらビルド出来なくなってしまったことで、このままでは良くないなという気持ちが芽生えて、色々調べてみたところGhostを公式でホスティングしてくれるサービスがあると知り、良さそうだったので使ってみようという感じです。そういえば以前、GatsbyからNext.jsへの移行もビルドができなくなったのがきっかけでした。 Ghost(Pro)とは Ghostとは Ghostとは、NodeJSベースで作られているオープンソースのブログプラットフォームです。 Ghostの大きな特徴は、その高速なパフォーマンスと直感的なUI/UXです。専門的な出版ツールとして、SEO最適化、メンバーシップやサブスクリプションモデル、カスタマイズ可能なデザインなどを提供し、プロのブロガーや出版者にとって理想的なプラットフォームとなっています。同じようなことができるWordPressとMediumと比較

フロントエンドで完結するまったくサーバーを使わないアイドル判定サービスを作った

フロントエンドで完結するまったくサーバーを使わないアイドル判定サービスを作った

この記事はQiitaに投稿したものの転載記事です。なぜ作ろうと思ったのか 1. 最近アイドル多くない？ NiziU、IVE、Kep1er、BLACKPINK、ITZY、SixTONES、Snow Man、なにわ男子、King & Prince、BTS、JO1、Da-iCE、INI、CUBERS、原因は自分にある。、BALLISTIK BOYZ、VOYZ BOY、Zero PLANET、プラチナボーイズ、BE：FIRST、BUDDiiS、7ORDER、OCTPATH、BLVCKBERRY、THE SUPER FRUIT、TravisJapan などなど 2. 誰が誰か分からんのだが… 3. Shazam的な感じでパッと誰か分かるもの欲しいなぁということで作ってみることにしました。作ったもの * アイドル判定AI「セレン」という写真を選択するとどのアイドルかを判定してくれるサービスを作りました。 * セレンは、

YouTubeのサバゲー動画をフィールドごと見れるサービスを作った

YouTubeのサバゲー動画をフィールドごと見れるサービスを作った

以前からサバゲーにハマっていることは書いてきましたが、1つサービスを作りました。 https://airsoft-videos.com はじめてのサバゲーフィールドに行く際に、よくYouTubeでそのフィールドで撮影されたサバゲー動画を見ていたんですが、フィールド名の表記がバラバラだったり、フィールド名が一般名詞で見つけにくかったりしたので、そのあたりを解決するサービスがほしいなーということで、今回作りました。合わせて、2つチャレンジをしました。 1. 最近までミノ駆動本を読んでいたこともあり、DDDを実践したいなということで、それっぽいこともやってみました 2. サーバーサイドJSに興味があったので、サーバーサイドはTSを使って実装しました良いコード／悪いコードで学ぶ設計入門posted with ヨメレバ仙塲大也技術評論社 2022年04月30日頃楽天ブックスで購入Amazonで購入Kindleで購入結局のところ、DDDでやるほどの規模ではなかったかなっていうのと、サーバーサイドJSは結局フロントエンドとは別物なのでメリット薄いかなという印象にな

linkifyを使って文字列に含まれているURLをLinkコンポーネントに変換する

linkifyを使って文字列に含まれているURLをLinkコンポーネントに変換する

今とある個人開発を行っていて、APIで取得した文字列含まれているURLをLinkコンポーネントに変換する必要が出てきました。一番かんたんな実装は、String.prototype.replaceを使う方法だと思うんですが、これだとdangerouslySetInnerHTMLを使うことになるので、出来れば他の方法が良いなと思っていたところに、linkifyを教えてもらいました。ありがとうございます！ということで、linkifyを使って実装しようとしたんですが、思ったような感じでは実装できなかったので、どうやって実装したのかを書いていきたいと思います。手順 ①必要なNPMパッケージをインストールする $ yarn add linkify linkify-react Next.jsを使っているので、linkify-reactも利用します。ちなみに、react-linkifyというパッケージもありますが、これは別物なのでご注意を。執筆時のこちらは5年ほどメンテナンスされていませんでした。 ②Linkコンポーネントを作る import { Link as C

Next.jsで作ってるブログでRSSフィードを出力する

Next.jsで作ってるブログでRSSフィードを出力する

このブログのRSSを出力したい機運が高まってきたので、Next.jsでのRSSフィードの出力方法を解説します。他に良い方法があるかもしれないです。よければ教えてください！ RSSフィードを出力するのに使えそうなnpmが2つあります。 rssとfeedですが、今回はfeedを使います。参考にしたcatnoseさんはrssの方を使ってました。どちらでもやりたいことはできるのでどちら使っても良いと思います。 feedにした理由は 1. rssの方が最終リリースが5年前と古い 2. rssの方が依存が多い mime-typesとxmlの2つ。xmlの方は最終更新日が6年前である。 3. feedは依存しているのがxml-jsだけ依存は少ないほうがやっぱり良いですよね。ってことでやっていきます。手順 ①feedを追加する $ yarn add feed ②RSSフィードを出力するページを作るほぼ、参考にしたcatnoseさんの記事と同じです。 import { GetServerSidePropsContext } from 'n

個人ブログをGatsbyからNext.jsに移行した

個人ブログをGatsbyからNext.jsに移行した

元々Gatsbyで作っていた個人ブログをNext.jsで書き直すことにしました。使っていたGatsbyのバージョンが2.0系と古く、先日購入したM1MaxMBPでビルドもできない状態で、新しくブログ記事を書いてもローカル確認できないままNetlifyにアップしていました。さすがにそのままというわけにはいかないだろうということで、考えたのは次の選択肢でした。 1. GatsbyのバージョンアップしてM1MaxMBPでもビルドできる状態にする 2. Gatsbyの最新バージョンで1から作り直す 3. Next.jsで作り直す当時調べた感じだと、M1のMacでGatsbyを動かすには、Gatsby v3.0系である必要がありそうだったので、Gatsby v2.0から最新バージョンまでアップグレードするか、もしくは1から作り直してMDXファイルをコピーする。もしくは、Next.jsに移行してしまうのも手かなという感じでした。で、結局Next.jsに移行することに決めたわけですが、これにはいくつか理由があります。 1. 仕事などブログ以外のことでGatsbyを使うこ