什麼是Xata https://xata.io/ Xata是一個全託管的Serverless Postgres資料庫 不需要去管理伺服器或資料庫基礎設施 具有以...
Reply的按鈕 我們希望在Thread的title部分 加上回覆給Thread的按鈕 因此在昨天的 src/components/thread/PostCa...
我們今天要來做發文的component 先安裝今天會用到的套件 yarn add react-markdown remark-gfm npx shadcn-...
建立頁面 我們現在需要做一個thread頁面 並且讓Service頁面可以連結過去 先在service頁面中將我們的假資料threads給export出去 ex...
型別定義 我們現在要優化我們的Service 增加一些跟Service有關的外部連結 類似這樣 export interface ILinkItem { n...
先定義型別 現在我們需要幫每個討論串加上回覆 export interface IThread { id: string; name: string;...
先安裝今天會用到的套件 yarn add lucide-react npx shadcn-ui@latest init 選項全部選預設就好 npx sha...
安裝Nextjs npx create-next-app@latest 選項全部選預設就好 啟動Nextjs yarn dev 並且在你的瀏覽器打開 htt...
前幾年寫過鐵人賽https://ithelp.ithome.com.tw/users/20127836/ironman/3077不過當時的帳號是用FB登入的然後...
大家好，我是一宵三筵近期練習了將NextJS的小專案打包成靜態檔，透過CICD放到GitHub Pages上的操作但因為卡了一些坑弄了一整個晚上，因此來分享分享...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
在我們整合 API 的之前，要先來串接之前設定好的 Firebase Auth 的設定，所以要先製作簡單的登入與註冊帳號頁面。這樣在操作特定的 API 時才可...
Static Single Page View Implementation - 前端Code review 由於前端只需要刻板，這邊的code review就...
Static Single Page View Implementation - 前端專案review 這個作業分為前端刻板與系統設計，今天我們先來看前端(Re...
Bitcoin Trading Bot Design & Static Single Page View Implementation 這個是我做過最有...
時間過得很快，也來到本系列文章的倒數第二篇。 昨天介紹了 Next 快取機制的前兩層 - Data Cache 和 Request Memoization。兩者...
假如有閱讀前 27 天文章的讀者，可能會發現快取 ( Caching ) 這個詞時常出現在文章中，像是 Day 03 提到 ISR 會快取渲染結果；Day11...
昨天有提到，根據統計，圖片和 JavaScript 為整體網頁檔案大小佔比的前兩名，兩者加起來佔了近九成。 認識 Next 針對圖片優化推出的 componen...
Dynamic Routes 我們今天接續的做每個角色自己的頁面，來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...
實作練習 經過前面的介紹之後，相信大家應該有基礎的理解和認知了，接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...
根據 Web Almanac 2022 年的統計，網頁的圖片大小佔整體網頁檔案大小，中位數超過 6 成。而 JavaScipt 則佔近 3 成。(圖片來源：ht...
今天要接著介紹網頁開發很重要的一環， data fetch。很多時候我們開發功能時，往往需要從外部拿取資料，要如何拿取資料就是很重要的問題。這一篇會來介紹如何在...
時雨
‧
2023-09-24
設定完 Server Component 接著是 Client Component 安裝套件幫助找出使用者的預設語系。 pnpm add -D i18next-...
前面做了關於 client component 以及 server component 的基本介紹，這一篇來介紹一下他們背後的 render 機制。 新的 re...
時雨
‧
2023-09-23
稍微做個延伸，建立 Next 識別用戶預設語系跟記憶語系選擇的功能。 同樣主要參考這篇： i18n with Next.js 13 and app direct...
App Router 那我們來說說 app router 的機制吧！App Router 是 Next 13 新介紹的一種 routing 方式，與之相對過去的...
緣起 官方介紹影片連結，我也是做這個主題才知道，原來這個概念已經存在那麼久了，那我們快速講解他的成因吧！ 影片整理 目的Dan Abramov 說出了我們前端開...
SSR Next 的 SSR（Server-Side Rendering）的概念是在每個使用者請求時動態產生頁面內容，而不是提前產生靜態 HTML 頁面，這樣頁...
ISR概念 ISR（Incremental Static Regeneration）是 Next.js 在（SSG）的基礎上做出的改進方法，讓頁面在構成之後根據...
昨天介紹了 client component，今天要介紹 next 13 推出的新功能: server component。server component 可...
時雨
‧
2023-09-22
skynocover
一宵三筵
Bill
Moscle.dev
S.C
LucianoLee
Jasper
iThome鐵人賽
看影片追技術