React Key Blog (Remake)

A React + Nextjs + Vercel Game Development Technical Blog Webpage

• 日本語
• 繁體中文

Keyword

Nextjs React Vercel Typescript Blog Tailwind CSS next-auth Cloudinary

Contents

• Introduction
• Environment
• Feature
• Contact
• License

Introduction

Check out my blog here: Key Blog

This is a React remake of the AngularFire Blog that I built in 2019. Old AngualrFire Key Blog

Deployed on Vercel

Here is the refined version of your text:

---

Check out my blog here: Key Blog

This is a React remake of the AngularFire Blog that I built in 2019. Old AngularFire Key Blog

Deployed on Vercel

The main reasons I wanted to remake the blog in React + Next.js from Angular + Firebase are:

• The AngularFire blog is a static single-page website
  • It is hard to share post links with people
• Partial rendering is not supported in Angular (or maybe I just don't know how)
  • Every time the page refreshes, users have to scroll down again from the top
• I did not implement localization in the old blog
  • I write my post in English, but I want Japanese people to be able to view my posts without knowing English
• The old UI design with a yellow background made the posts hard to read

---

This version improves readability and easier to use

Environment

• React: 18.3.1
• nextjs: 14.2.5
• next-auth: 5.0.0-beta.20
• typescript: 5.2.2
• vercel: 32.3.0
• tailwind css: 5.2.2
• npm: 20.15.0

Feature

• Cute bear parachuting from the sky
• Login with Next-Auth
• Create, edit, and delete posts (Admin only)
• Create, edit, and delete post tags (Admin only)
• Image upload support for posts and comments (Cloudinary)
• Post pagination
• Post search functionality
• Partial rendering
• Responsive web design (RWD)
• Markdown support in posts and comments
• Notifications
• Localization: English, Japanese, Korean, Traditional Chinese
• Skeleton loading
• Zoomable images
• Error handling (e.g., post not found)
• Commenting and liking posts
• Dark mode
• OpenGraph support for social media sharing
• Background music

If you like this, please leave a star.

---

日本語

概要

ブログ: Key Blog

これは、2019年に作成したAngularFireブログのReactリメイク版です。 Old AngualrFire Key Blog

Vercelにデプロイされています。

ブログをAngular + FirebaseからReact + Next.jsにリメイクした主な理由は下記になります:

• AngularFireブログは静的なシングルページウェブサイトです
  • 投稿リンクを他の人と共有するのが難しい
• AngularではPartial Renderingがサポートされていません（もしくは私が知らないだけかもしれません）
  • ページをリフレッシュするたびに、ユーザーは再び上からスクロールしなければなりません
• 旧ブログではローカリゼーションを実装していませんでした
  • 投稿は英語で書いていますが、日本の方にも英語を知らなくても投稿を共有したいです
• 黄色の背景を持つ旧UIデザインでは、投稿が見づらかったです

---

このバージョンは読みやすさと使いやすさを向上させました。

環境

• React: 18.3.1
• nextjs: 14.2.5
• next-auth: 5.0.0-beta.20
• typescript: 5.2.2
• vercel: 32.3.0
• tailwind css: 5.2.2
• npm: 20.15.0

機能

• 空から降りてくるかわいいクマ
• Next-Authでのログイン
• 投稿の作成、編集、削除（管理者のみ）
• 投稿タグの作成、編集、削除（管理者のみ）
• 投稿とコメントの画像アップロードサポート（Cloudinary）
• 投稿のページネーション
• 投稿検索機能
• Partial Rendering
• レスポンシブウェブデザイン（RWD）(プラットフォーム対応)
• 投稿とコメントのMarkdownサポート
• 通知
• ローカリゼーション：英語、日本語、韓国語、繁体字中国語
• スケルトンローディング
• ズーム可能な画像
• エラーハンドリング（例：投稿が見つからない）
• 投稿へのコメントといいね
• ダークモード
• ソーシャルメディア共有のためのOpenGraphサポート
• 音楽再生

繁體中文

我的博客: Key Blog

這是我在2019年建立的AngularFire博客的React重製版。 Old AngualrFire Key Blog

部署在Vercel

我想將博客從Angular + Firebase重製為React + Next.js的主要原因如下:

• AngularFire博客是一個靜態的單頁網站
  • 很難與他人分享文章鏈接
• Angular不支持部分渲染（或者可能只是我不知道如何實現）
  • 每次刷新頁面時，使用者都必須從頂部重新滾動
• 舊博客中沒有實現本地化
  • 我用英文寫文章，但我希望日本人也能在不懂英文的情況下查看我的文章
• 舊的黃色背景UI設計使文章難以閱讀

---

這個版本提高了可讀性和易用性。

環境

• React: 18.3.1
• nextjs: 14.2.5
• next-auth: 5.0.0-beta.20
• typescript: 5.2.2
• vercel: 32.3.0
• tailwind css: 5.2.2
• npm: 20.15.0

功能

• 可愛的小熊從天而降
• 使用 Next-Auth 登錄
• 創建、編輯和刪除帖子（僅限管理員）
• 創建、編輯和刪除帖子標籤（僅限管理員）
• 支持帖子和評論的圖片上傳（Cloudinary）
• 帖子分頁
• 帖子搜索功能
• 局部加載
• 響應式網頁設計（RWD）
• 支持帖子和評論的 Markdown
• 通知
• 本地化：英語、日語、韓語、繁體中文
• 骨架加載
• 可放大的圖片
• 錯誤處理（例如：找不到帖子）
• 評論和點贊帖子
• 黑暗模式
• 支持社交媒體分享的 OpenGraph
• 背景音樂

Contact

Email: Key tavik002@gmail.com

---

License

MIT License

Copyright (c) 2024 key

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ Back to top

All Copyright Reserved