Using JSR with Next.js

Next.js is a React framework for building full-stack web applications.

JSR packages can be used in Next.js by using JSR’s npm compatibility layer.

First, create a new Next.js project:

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

You can then add JSR packages using your package manager. This will add the package to your package.json and install it into your node_modules folder using your preferred package manager (npm, yarn, or pnpm).

# pnpm 10.9+ and yarn 4.9+
pnpm add jsr:@std/encoding
yarn add jsr:@std/encoding

# npm, bun, and older versions of yarn or pnpm
npx jsr add @std/encoding
bunx jsr add @std/encoding
yarn dlx jsr add @std/encoding
pnpm dlx jsr add @std/encoding

Note: A .npmrc file is created when using the JSR CLI. The .npmrc file that is created should be checked into source control. Without this, future calls to npm install / yarn / pnpm install / bun install will not succeed.

You can then import JSR packages in your code:

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

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

Running next dev to start the local development server will serve your application at http://localhost:3000/. You can then visit http://localhost:3000/ to see it.

next dev

Learn more about using packages.