使用 JSR 搭配 Next.js

Next.js 是一個用於建構全端堆疊網頁應用程式的 React 框架。

可以使用 JSR 的 npm 相容性層，在 Next.js 中使用 JSR 套件。

首先，建立一個新的 Next.js 專案

npx create-next-app@latest
yarn create next-app
pnpm create next-app

然後，你可以使用 jsr CLI 來新增 JSR 套件。這會將套件新增到你的 package.json ，並使用你偏好的套件管理員 (npm、yarn 或 pnpm) 將其安裝到你的 node_modules 資料夾。

npx jsr add @std/encoding

注意：你應該查看建立在版本控管中的 .npmrc 檔案。如果沒有此檔案，以後呼叫 npm install / yarn / pnpm install 會失敗。

然後，你可以在程式碼中匯入 JSR 套件

import { encodeBase64 } from "@std/encoding/base64";

export default function Home() {
  return <main>{encodeBase64("Hello, world!")}</main>;
}

執行 next dev 來啟動本地端開發伺服器，會在 https://127.0.0.1:3000/ 提供你的應用程式。然後，你可以前往 https://127.0.0.1:3000/ 來查看。

$ next dev

深入了解使用套件。