なぜまとめるのか

Railsオンリーでつくったブログ(日台one!というブログ名)のフロントをこれからNext.jsに置き換えようと考えています。
そのため、現状の仕様が置き換わってしまう前に現状の姿形を記録に残したいと思いました。

github リポジトリ

ちなみに、僕は日本人、彼女が台湾人でブログの記事作成は二人でやってます。
お互いの母国語で記事を書いて、記事を投稿した瞬間にAmazon translateで翻訳し、DBに保存する仕様です。

技術スタック

カテゴリ	要素
言語/フレームワーク	Ruby / Rails / tailwind css
ミドルウェア	MySQL
クラウドサービス	AWS EC2 / CloudFront / AmazonTranslate

未経験入社した段階ではRails歴1週間にも関わらず、Railsのバックエンドエンジニアとして採用されたので、自学のためにRailsでブログを作りました。
Railsなのにtailwind cssを採用した理由は、綺麗なUIのテンプレが揃っていたのでそのままデザインに使えそう！と思ったからです。
インフラは勉強も兼ねてAWSを使いました。ドメイン代とRoute53(月額0.5$)以外は無料枠で済んでます。

ブログの画面構成

コントローラーは記事とユーザーのしかないのでその二つのカテゴリに分けてまとめます。
他にある画面はユーザーのログイン画面くらいです。
ユーザーの認証にはdeviceを使っています。

記事

	画面	説明
一覧		* サムネイル、タイトル、記事の冒頭、場所、タグ、記事作成者をカードで表示 * ヘッダーに言語切り替えボタン * フッターに利用規約、問い合わせ、各種SNSへのリンク
詳細		* サムネイル、タイトル、場所、タグ、作成者、本文 * 記事作成者の各種SNS *おすすめ記事(ランダムで3つ表示してるだけ)
新規作成/編集		サムネイル、国、都道府県、タグ、タイトル、本文マークダウン記法 *本文はドラッグアンドドロップで画像アップロード

ユーザー

ユーザーの新規作成画面はあえて作っていません。
コンソールからユーザーデータは作成しています。

	画面	説明
詳細		* ユーザーの各種SNS * ユーザーの記事投稿数 *ユーザーが投稿した記事
編集		* 画像、表示名、自己紹介、記事を書く言語(翻訳言語を決めるため) * ユーザーの各種SNS

まとめ

Railsオンリーのブログの構成についてまとめました。
フロントをNext.jsに置き換えていくために、Railsのapiの開発も必要になってきます。
一部の画面はerbで一部の画面はNext.jsの画面のように段階的に変えていくことは可能なのか気になっているので、調べてみたいと思います。

おまけ

PageSpeed Insightsの情報を載せておきます。
Next.jsに置き換えたときに良くなるといいなと思っています。

一覧ページ

スマホ	PC

詳細ページ

スマホ	PC