diff --git a/tutorials/client/sdks/web/next-js.mdx b/tutorials/client/sdks/web/next-js.mdx
index 587e087c..f4018f22 100644
--- a/tutorials/client/sdks/web/next-js.mdx
+++ b/tutorials/client/sdks/web/next-js.mdx
@@ -13,10 +13,22 @@ In this tutorial, we’ll explore how to enhance a Next.js application with offl
 
 ### Next.js Project Setup
 Let's start by bootstrapping a new Next.js application using [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-```shell
-pnpm dlx create-next-app@latest <project_name>
+<CodeGroup>
+
+```shell npm
+npx create-next-app@latest my-powersync-app
+```
+
+```shell yarn
+yarn create next-app my-powersync-app
 ```
 
+```shell pnpm
+pnpm create next-app my-powersync-app
+```
+
+</CodeGroup>
+
 When running this command you'll be presented with a few options. The PowerSync suggested selection for the setup options Next.js offers are:
 ```shell
 Would you like to use TypeScript?  Yes
@@ -40,10 +52,22 @@ Using PowerSync in a Next.js application will require the use of the [PowerSync
 
 In addition to this we'll also install [`@powersync/react`](https://www.npmjs.com/package/@powersync/react), which provides several hooks and providers for easier integration.
 
-```shell
+<CodeGroup>
+
+```shell npm
+npm install @powersync/web @journeyapps/wa-sqlite @powersync/react
+```
+
+```shell yarn
+yarn add @powersync/web @journeyapps/wa-sqlite @powersync/react
+```
+
+```shell pnpm
 pnpm install @powersync/web @journeyapps/wa-sqlite @powersync/react
 ```
 
+</CodeGroup>
+
 <Note>This SDK currently requires [@journeyapps/wa-sqlite](https://www.npmjs.com/package/@journeyapps/wa-sqlite) as a peer dependency.</Note>
 
 ## Next.js Config Setup