稍微做個延伸，建立 Next 識別用戶預設語系跟記憶語系選擇的功能。 同樣主要參考這篇： i18n with Next.js 13 and app direct...
到底該為一路順暢沒出Bug高興還是遇到難題花時間克服狂喜，都幾 來啟動專案囉，使用的IDE為VScode，為什麼不是WebStrom呢，我開發後端都會選擇Je...
關於渲染的構想 pre-rendering 一直是 Next.js 的核心思想，他們將其分為兩種實作方法，一個是 Rendering，也就是一般的渲染概念，另一...
建立頁面 我們現在需要做一個thread頁面 並且讓Service頁面可以連結過去 先在service頁面中將我們的假資料threads給export出去 ex...
挑戰目標: MockNative Camp 今天要來實作Nav Detail的部分，昨天將相關的List放到了config中，也可以成功的hover該tab後...
我們今天要來做發文的component 先安裝今天會用到的套件 yarn add react-markdown remark-gfm npx shadcn-...
CRON 如果你在特定時間或特定週期需要執行特定的腳本或任務Vercel有CRON可以使用 什麼是CRON CRON 是一個在 Unix-like 操作系統中廣...
實作練習 經過前面的介紹之後，相信大家應該有基礎的理解和認知了，接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...
前面做了關於 client component 以及 server component 的基本介紹，這一篇來介紹一下他們背後的 render 機制。 新的 re...
時雨
‧
2023-09-23
網頁常見的功能之一就是表單，像是註冊、輸入個人資料、後臺建立管理資料等都需要有表單輸入的功能，另外最好還有前端能事先對表單的輸入內容進行檢查，通過後才發給後端。...
Setup 好 Next.js 環境後，可以開始 coding，做一個非常簡單的 blog。 首先，在 n02-blog/pages 目錄下，新增一個檔案 i...
現在是把元件從專案中獨立出來了，但還只能從專案上去看到元件所呈現的結果，為了之後開發元件方便，來給元件庫加上 storybook 吧。 可以直接將剛剛建好的...
要在 Nextjs 設定翻譯要分別處理 client component 跟 server component。 先安裝用到的套件。 pnpm add next...
Nextjs的middleware 我們來學Nextjs的middleware 在你的src/middleware.ts建立檔案 import { NextRe...
型別定義 我們現在要優化我們的Service 增加一些跟Service有關的外部連結 類似這樣 export interface ILinkItem { n...
我們想要在首頁顯示目前最新的幾個thread 在你的src/lib/database/thread.ts中 新增下的function 原因是因為我們在首頁不需要...
今天要來介紹 client component 的用法，其實 client component 就是過去 next 12 常用的 component，功能上大同...
時雨
‧
2023-09-21
什麼是Xata https://xata.io/ Xata是一個全託管的Serverless Postgres資料庫 不需要去管理伺服器或資料庫基礎設施 具有以...
設定完 Server Component 接著是 Client Component 安裝套件幫助找出使用者的預設語系。 pnpm add -D i18next-...
SSR Next 的 SSR（Server-Side Rendering）的概念是在每個使用者請求時動態產生頁面內容，而不是提前產生靜態 HTML 頁面，這樣頁...
Dynamic Routes 我們今天接續的做每個角色自己的頁面，來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...
i18n 先安裝今天會用到的套件 pnpm dlx shadcn@latest add select pnpm install @formatjs/intl...
昨天介紹了 client component，今天要介紹 next 13 推出的新功能: server component。server component 可...
時雨
‧
2023-09-22
首先是元件庫，目前用的最順手的是 MUI ，先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...
目前在 Next App 中點擊登出後，在嘗試重新登入的時候會發現不會再次跳出先前的 Keycloak 登入畫面，這是因為當 Next 這邊登出時只是清理掉 N...
今天這個討論版除了可以當討論版以外還可以當作個人部落格來使用只需要加上permission 讓特定用戶可以發文就好我們來實作看看吧 安裝套件 先安裝今天會用到的...
查看回報 為了方便我們快速引導至Dashboard畫面 我們可以在最上方的連結中 加入dashboard的連結 在src/components/layout/T...
先定義型別 現在我們需要幫每個討論串加上回覆 export interface IThread { id: string; name: string;...
Nextjs的api 建立Nextjs的api 在src/app/api/service/[serviceId]/thread/route.ts中 建立以下的檔...
我們先來處理昨天的問題 點開你的F12 你就看到錯誤的原因 昨天的問題來自前後端的時間渲染不一致 因此我們需要統一時間的作法 新增一個時間格式化的functio...
Jasper
Moscle.dev
LucianoLee
skynocover
tjabi
iThome鐵人賽
看影片追技術