iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

使用Nextjs及Xata全端開發 打造屬於你的討論版SaaS 系列

這個題目中你將會:
打造一個屬於你的討論版SaaS
成果會類似
https://www.akraft.net/service/66a6eca2bfccee3f04a52bc4

技術線:
前後端使用Nextjs這個框架
DB使用Xata這個PaaS

如果你可以事先了解會更好:
1. React
2. Typescript
3. Tailwind
4. git / github

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day1] 前言與系列結構大綱

前幾年寫過鐵人賽https://ithelp.ithome.com.tw/users/20127836/ironman/3077不過當時的帳號是用FB登入的然後...

2024-08-21 ‧ 由 skynocover 分享
DAY 2

[Day2] Nextjs環境設定

安裝Nextjs npx create-next-app@latest 選項全部選預設就好 啟動Nextjs yarn dev 並且在你的瀏覽器打開 htt...

2024-08-22 ‧ 由 skynocover 分享
DAY 3

[Day3]製作討論串頁面 - Nextjs的useClient

先安裝今天會用到的套件 yarn add lucide-react npx shadcn-ui@latest init 選項全部選預設就好 npx sha...

2024-08-23 ‧ 由 skynocover 分享
DAY 4

[Day4] 幫每個討論串都加上自己的回應 - Nextjs中的SSR及CSR

先定義型別 現在我們需要幫每個討論串加上回覆 export interface IThread { id: string; name: string;...

2024-08-24 ‧ 由 skynocover 分享
DAY 5

[Day5] 優化Service的顯示 - 介紹Nextjs的Link

型別定義 我們現在要優化我們的Service 增加一些跟Service有關的外部連結 類似這樣 export interface ILinkItem { n...

2024-08-25 ‧ 由 skynocover 分享
DAY 6

[Day6] 製作thread頁面 - nextjs的notFound頁面

建立頁面 我們現在需要做一個thread頁面 並且讓Service頁面可以連結過去 先在service頁面中將我們的假資料threads給export出去 ex...

2024-08-26 ‧ 由 skynocover 分享
DAY 7

[Day7] Post頁面 - Markdown呈現及錯誤顯示

我們今天要來做發文的component 先安裝今天會用到的套件 yarn add react-markdown remark-gfm npx shadcn-...

2024-08-27 ‧ 由 skynocover 分享
DAY 8

[Day 8] 畫面初步完成

Reply的按鈕 我們希望在Thread的title部分 加上回覆給Thread的按鈕 因此在昨天的 src/components/thread/PostCa...

2024-08-28 ‧ 由 skynocover 分享
DAY 9

[Day 9] 準備我們的資料庫 - Xata

什麼是Xata https://xata.io/ Xata是一個全託管的Serverless Postgres資料庫 不需要去管理伺服器或資料庫基礎設施 具有以...

2024-08-29 ‧ 由 skynocover 分享
DAY 10

[Day10] 來接Database吧 - Xata初始化及Nextjs的SSR

先來定義服務要的Schema 在專案的src/lib/database/schema.json 建立以下檔案 { "tables": [...

2024-08-30 ‧ 由 skynocover 分享