Laravel Passport 提供了 Laravel 應用程式完整的 OAuth2 伺服器實作整合。Passport 是基於 League OAuth2 Server 套件建置。

如果您還不知道何謂 OAuth2，在繼續之前，請先熟悉 OAuth2 的一般術語和功能。

參考資源

加速 40% 冷啟動和 28% 建置速度

在 Next.js 最新版本，官方優化了套件匯入，改善了本地開發的效能和正式環境冷啟動的速度。特別適用於使用大型的 Icon ，元件庫，或其他重複 Export 大量模組的相依套件。

原文連結
備註：本文有略微簡化原文內容並提供一些補充，目標提供一個較簡化流暢容易理解的版本。另外本文改寫了 tsx 的範例希望能更容易了解觀念。

提到建置網頁應用程式，React 已經成為主流好一陣子了（目前 2023），並且採用率持續在上升。常見搭配 React 開發網站的方式中，Next.js 是比較主流的選項之一。

自從去年他們發佈了 App Router 等重大更新以來也一直備受關注。新的路由架構採用了嵌套佈局（Nested Layouts）並緊密整合了 React Server Component 和 Suspense 。

macOS 環境安裝

使用 pyenv 目的是讓本地環境支援多種 Python 版本。大多的程式語言都有對應的工具如 Nodejs 的 nvm，Ruby 的 rvm，rbenv 等。

首先，參考以下的實務範例：

1
2
3
4
5
6
7
8
9
10
11

async function main() {
  const stream = await opeanai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'user', content: '測試回答' },
    ],
  });
  for await(const part of stream) {
    process.stdout.write(part.choices[0]?.delta?.content || '');
  }
}

這是一段 OpenAI Node SDK 的範例，使用 GPT-4 搭配串流的方式。

如過您希望製作像 Airbnb 那樣自訂標記的樣式，動態顯示一些資訊並且當用戶和其互動時可以渲染自訂的 React 元件，那麼您來對地方了。

本範例嘗試使用 Google 官方的 React Wrapper 函式庫實作 Google Map 功能，目標為自訂 MapOverView 達成在 Map 上加入複雜的 Marker。 例如像 Airbnb 點擊房源時可以展開。這個範例我們會支援 Marker Clustering。

完整教學與範例請參考 Github

使用者介面（UI）是由許多不同“部分”組成，而每個部分會以不同的頻率回應使用者的操作。有些例如表單的輸入欄位（<input>），需要即時回應使用者的操作，而其他像是內容很長的“篩選列表”或切換頁面則稍微慢一些。

在同步渲染的情況下，也就是沒有併發功能的 React 或者大部分的 JavaScript UI 框架/函式庫。一些回應比較慢的介面操作就會阻塞執行而拖累較快回應的部分。

React 併發功能就是為了解耦/分離回應快和慢的介面，使渲染慢的部分在背景繼續執行而不阻塞較快的部分，達到每個部分可以各自回應使用者的操作。

併發渲染並不會讓應用程式提升效率變快，只是利用上敘分離的方式讓使用起來感覺體驗變快了。

本文將探討 React 併發功能（React Concurrent），了解其解決的問題以及如何利用。

雖然 ref 是一個可變更 (mutable 物件在建立後可被修改) 的容器，我們理論上可以儲存任何資料。通常我們會拿來處理存取 DOM 節點:

1
2
3

const ref = React.useRef(null);

return <input ref={ref} defaultValue='Hello world' />;

ref 是一個內建的屬性，React 會在渲染後儲存 DOM 節點，當元件卸載後也會設為 null。

Effect 是讓您可以脫離典型 React 設計模型的一個方式。它讓您可以跳脫到 React 之外並讓您的 React 元件同步外部系統，比如使用非 React 的套件，網路，瀏覽器 DOM 。假如沒有涉及外部，例如您想要在某些 props 或 state 發生變更時更新元件的 state ，那麼您不應該使用 Effect。移除不必要的 Effect 可以讓您的程式碼更容易維護，執行效率更好，減少錯誤的產生。

本文您將學習

• 為什麼以及如何移除不必要的 Effect
• 如何快取耗費效能的計算而不使用 Effect
• 如何重置和調整元件 State 而不使用 Effect
• 如何在多個事件處理函式共享邏輯
• 哪些邏輯應該移到事件處理函式中
• 如何通知上層元件狀態變更

由於專案已經陸續採用 Laravel Jetstream 並且遇到一個需求; 根據使用的類型在登入時導向不同路由。想像一個情境，您有一般使用者和管理員，而管理員擁有後台功能。通常可能會需要將管理員導向後台介面。

使用 Laravel Jetstream 或 Fortify，要實作這個功能並不直覺，特別是使用兩階段驗證。