0xMiden · omerbek · Aug 10, 2026
diff --git a/docs/src/web-client/counter_contract_tutorial.md b/docs/src/web-client/counter_contract_tutorial.md
@@ -18,43 +18,13 @@ This tutorial provides a foundational understanding of building and interacting
 
 ## Prerequisites
 
-- Node `v20` or greater
-- Familiarity with TypeScript
-- `yarn`
+Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial.
 
 This tutorial assumes you have a basic understanding of Miden assembly. To quickly get up to speed with Miden assembly (MASM), please play around with running basic Miden assembly programs in the [Miden playground](https://0xmiden.github.io/examples/).
 
 ## Step 1: Initialize your Next.js project
 
-1. Create a new Next.js app with TypeScript:
-
-   ```bash
-   npx create-next-app@latest miden-web-app --typescript
-   ```
-
-   Hit enter for all terminal prompts.
-
-2. Change into the project directory:
-
-   ```bash
-   cd miden-web-app
-   ```
-
-3. Install the Miden SDK:
-   ```bash
-   yarn add @miden-sdk/miden-sdk@0.15.2
-   ```
-
-**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this:
-
-`package.json`
-
-```json
-  "scripts": {
-    "dev": "next dev --webpack",
-    ...
-  }
-```
+Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps.
 
 ## Step 2: Edit the `app/page.tsx` file:
 

diff --git a/docs/src/web-client/create_deploy_tutorial.md b/docs/src/web-client/create_deploy_tutorial.md
@@ -20,9 +20,7 @@ In this tutorial, we'll build a simple Next.js application that demonstrates the
 
 ## Prerequisites
 
-- Node `v20` or greater
-- Familiarity with TypeScript
-- `yarn`
+Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial.
 
 ## Public vs. private accounts & notes
 
@@ -39,37 +37,7 @@ It is useful to think of notes on Miden as "cryptographic cashier's checks" that
 
 ## Step 1: Initialize your Next.js project
 
-1. Create a new Next.js app with TypeScript:
-
-   ```bash
-   npx create-next-app@latest miden-web-app --typescript
-   ```
-
-   Hit enter for all terminal prompts.
-
-2. Change into the project directory:
-
-   ```bash
-   cd miden-web-app
-   ```
-
-3. Install the Miden SDK:
-
-<CodeSdkTabs example={{
-  react: { code: `yarn add @miden-sdk/react @miden-sdk/miden-sdk@0.15.2` },
-  typescript: { code: `yarn add @miden-sdk/miden-sdk@0.15.2` },
-}} reactFilename="" tsFilename="" />
-
-**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this:
-
-`package.json`
-
-```json
-  "scripts": {
-    "dev": "next dev --webpack",
-    ...
-  }
-```
+Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps.
 
 ## Step 2: Set up the Miden client
 

diff --git a/docs/src/web-client/creating_multiple_notes_tutorial.md b/docs/src/web-client/creating_multiple_notes_tutorial.md
@@ -25,9 +25,7 @@ The entire flow is wrapped in a helper called `multiSendWithDelegatedProver()` t
 
 ## Prerequisites
 
-- Node `v20` or greater
-- Familiarity with TypeScript
-- `yarn`
+Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial.
 
 ## What is Delegated Proving?
 
@@ -44,37 +42,7 @@ proving service. This means your browser never has to generate the full ZK proof
 
 ## Step 1: Initialize your Next.js project
 
-1. Create a new Next.js app with TypeScript:
-
-   ```bash
-   npx create-next-app@latest miden-web-app --typescript
-   ```
-
-   Hit enter for all terminal prompts.
-
-2. Change into the project directory:
-
-   ```bash
-   cd miden-web-app
-   ```
-
-3. Install the Miden SDK:
-
-<CodeSdkTabs example={{
-  react: { code: `yarn add @miden-sdk/react @miden-sdk/miden-sdk@0.15.2` },
-  typescript: { code: `yarn add @miden-sdk/miden-sdk@0.15.2` },
-}} reactFilename="" tsFilename="" />
-
-**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this:
-
-`package.json`
-
-```json
-  "scripts": {
-    "dev": "next dev --webpack",
-    ...
-  }
-```
+Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps.
 
 ## Step 2: Edit the `app/page.tsx` file:
 

diff --git a/docs/src/web-client/foreign_procedure_invocation_tutorial.md b/docs/src/web-client/foreign_procedure_invocation_tutorial.md
@@ -33,43 +33,13 @@ The diagram above depicts the "count copy" smart contract using foreign procedur
 
 ## Prerequisites
 
-- Node `v20` or greater
-- Familiarity with TypeScript
-- `yarn`
+Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial.
 
 This tutorial assumes you have a basic understanding of Miden assembly and completed the previous tutorial on incrementing the counter contract. To quickly get up to speed with Miden assembly (MASM), please play around with running basic Miden assembly programs in the [Miden playground](https://0xmiden.github.io/examples/).
 
 ## Step 1: Initialize your Next.js project
 
-1. Create a new Next.js app with TypeScript:
-
-   ```bash
-   npx create-next-app@latest miden-fpi-app --typescript
-   ```
-
-   Hit enter for all terminal prompts.
-
-2. Change into the project directory:
-
-   ```bash
-   cd miden-fpi-app
-   ```
-
-3. Install the Miden SDK:
-   ```bash
-   yarn add @miden-sdk/miden-sdk@0.15.2
-   ```
-
-**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this:
-
-`package.json`
-
-```json
-  "scripts": {
-    "dev": "next dev --webpack",
-    ...
-  }
-```
+Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. You can use `miden-fpi-app` as the project name if you want to keep this tutorial separate from the earlier ones.
 
 ## Step 2: Edit the `app/page.tsx` file
 

diff --git a/docs/src/web-client/setup_guide.md b/docs/src/web-client/setup_guide.md
@@ -10,9 +10,19 @@ This guide covers the configuration required to use the Miden web SDK (`@miden-s
 ## Prerequisites
 
 - Node.js 20+ (Node 22+ requires an extra `localStorage` polyfill — see below)
-- Next.js 14+ with App Router
 - yarn or npm
 
+## Create a tutorial project
+
+Most Web Client tutorials use a Next.js application with TypeScript:
+
+```bash
+npx create-next-app@latest miden-web-app --typescript
+cd miden-web-app
+```
+
+Accept the default prompts unless the tutorial asks for a different project name or framework.
+
 ## Install the SDK
 
 ```bash
@@ -29,6 +39,8 @@ These tutorials use Next.js, so all code examples import from the SDK's `/lazy`
 
 ## Next.js Configuration
 
+The Next.js tutorials assume Next.js 14+ with App Router.
+
 Create or update `next.config.ts` with these required settings:
 
 ```ts
@@ -65,6 +77,16 @@ const nextConfig: NextConfig = {
 export default nextConfig;
 ```
 
+Then update the development script in `package.json` to use webpack:
+
+```json
+{
+  "scripts": {
+    "dev": "next dev --webpack"
+  }
+}
+```
+
 ### Importing `.masm` files (for smart contract tutorials)
 
 If your tutorials use Miden assembly (`.masm`) files, add this webpack rule inside the `webpack` callback:

diff --git a/docs/src/web-client/unauthenticated_note_how_to.md b/docs/src/web-client/unauthenticated_note_how_to.md
@@ -30,9 +30,7 @@ Alice ➡ Wallet 1 ➡ Wallet 2 ➡ Wallet 3 ➡ Wallet 4 ➡ Wallet 5
 
 ## Prerequisites
 
-- Node `v20` or greater
-- Familiarity with TypeScript
-- `yarn`
+Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial.
 
 This tutorial assumes you have a basic understanding of Miden assembly. To quickly get up to speed with Miden assembly (MASM), please play around with running basic Miden assembly programs in the [Miden playground](https://0xmiden.github.io/examples/).
 
@@ -60,37 +58,7 @@ This tutorial assumes you have a basic understanding of Miden assembly. To quick
 
 ## Step 1: Initialize your Next.js project
 
-1. Create a new Next.js app with TypeScript:
-
-   ```bash
-   npx create-next-app@latest miden-web-app --typescript
-   ```
-
-   Hit enter for all terminal prompts.
-
-2. Change into the project directory:
-
-   ```bash
-   cd miden-web-app
-   ```
-
-3. Install the Miden SDK:
-
-<CodeSdkTabs example={{
-  react: { code: `yarn add @miden-sdk/react @miden-sdk/miden-sdk@0.15.2` },
-  typescript: { code: `yarn add @miden-sdk/miden-sdk@0.15.2` },
-}} reactFilename="" tsFilename="" />
-
-**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this:
-
-`package.json`
-
-```json
-  "scripts": {
-    "dev": "next dev --webpack",
-    ...
-  }
-```
+Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps.
 
 ## Step 2: Edit the `app/page.tsx` file