### Install and Run Next JS Example

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/wallets-connect-with-nextjs/README.md

Navigate to the example directory, install dependencies using pnpm, and start the development server. Access the application at http://localhost:3000.

```bash
cd examples/passport/wallets-connect-with-nextjs
pnpm install
pnpm dev
```

--------------------------------

### Build and Prepare SDK and Examples

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/README.md

Commands to install dependencies, build the SDK, prepare it for local use, and prepare the examples.

```bash
pnpm install

pnpm build

pnpm prepare:sdk

pnpm prepare:examples

pnpm install
```

--------------------------------

### Run Locally

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/commerce-widget-nextjs/README.md

Start the development server to run the example app locally.

```bash
pnpm dev
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/_prompts/example-app-4-testing.txt

Change the current directory to the Next.js example application for the specified feature. This is the first step before installing dependencies or running tests.

```bash
cd examples/orderbook/{feature name}-with-nextjs
```

--------------------------------

### Run Development Server

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/wallets-transactions-with-nextjs/README.md

Use one of these commands to start the development server. Ensure you have the correct package manager installed.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
bun dev
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-gas-estimation-with-nextjs/tutorial.md

Change the current directory to the specific example app for gas estimation with Next.js. This is necessary before installing dependencies.

```bash
cd ts-immutable-sdk/examples/checkout/sdk-gas-estimation-with-nextjs
```

--------------------------------

### Run Development Server

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/logged-in-user-with-nextjs/tutorial.md

Start the development server for the NextJS Passport SDK example application. This command navigates to the example directory and runs the development server.

```bash
cd examples/passport/logged-in-user-with-nextjs
pnpm dev
```

--------------------------------

### Navigate to Example Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/login-with-nextjs/tutorial.md

Change the current directory to the login-with-nextjs example within the cloned repository.

```bash
cd examples/passport/login-with-nextjs
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-switch-network-with-nextjs/tutorial.md

Change directory to the specific example app that demonstrates network switching with Next.js.

```bash
cd ts-immutable-sdk/examples/checkout/sdk-switch-network-with-nextjs
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/_prompts/example-app-4-testing.txt

Change the current directory to the checkout example app for the specified feature.

```bash
cd examples/checkout/{feature name}-with-nextjs
```

--------------------------------

### SDK Initialization in setupDefault.ts

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/_prompts/example-app-1-create-app-template.txt

Ensure the Orderbook SDK is correctly initialized in the `setupDefault.ts` file. Refer to example applications like `login-with-nextjs` for correct setup patterns.

```typescript
// IMPORTANT: MAKE SURE THAT THE Orderbook SDK IS INITIALIZED CORRECTLY IN THE SETUPDEFAULT.TS FILE.
// REFER TO OTHER EXAMPLE APPS LIKE LOGIN-WITH-NEXTJS FOR THE CORRECT SETUP.
```

--------------------------------

### Example Folder Structure

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/README.md

Illustrates the recommended directory layout for organizing example applications within the Immutable SDK project. Follow this structure to maintain consistency across examples.

```tree
examples
├── passport
│   ├── wallets-connect-with-nextjs
│   │   └── src
│   │       └── app
│   │           ├── page.tsx
│   │           ├── connect-with-eip1193
│   │           ├── connect-with-etherjs
│   │           └── connect-with-wagmi
│   └── wallets-signing-with-nextjs
│   │   └── src
│   │       └── app
│   │           ├── page.tsx
│   │           ├── sign-with-eip712
│   │           └── sign-with-erc191
│   └── ...
├── checkout
│   ├── sdk-connect-with-nextjs
│   │   └── src
│   │       └── app
│   │           ├── page.tsx
│   │           └── connect-with-metamask
│   └── ...
└── ...
```

--------------------------------

### Install @imtutorials/audience SDK

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/audience/sdk/README.md

Install the SDK using npm, pnpm, or yarn.

```sh
npm install @imtutorials/audience
# or
pnpm add @imtutorials
# or
yarn add @imtutorials/audience
```

--------------------------------

### Create Environment File

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/tutorial.md

Copies the example environment file to `.env` for configuration.

```bash
cp .env.example .env
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/_prompts/example-app-4-testing.txt

Change the current directory to the example application's root folder. This is the first step before running any commands.

```bash
cd examples/passport/{feature name}-with-nextjs
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/contracts/_prompts/example-app-4-testing.txt

Change the current directory to the specific example application folder for running tests.

```bash
cd examples/contracts/{feature name}-with-nextjs
```

--------------------------------

### Navigate to Example App Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/wallets-connect-with-nextjs/tutorial.md

Change the current directory to the specific example application within the cloned repository that demonstrates Wagmi integration.

```bash
cd ts-immutable-sdk/examples/passport/wallets-connect-with-nextjs
```

--------------------------------

### Start Development Server

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/create-collection-bid-with-nextjs/tutorial.md

Starts the development server for the application. This command should be run after setting up environment variables.

```bash
pnpm dev

```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/README.md

Installs project dependencies and builds the project. Ensure pnpm is installed globally.

```bash
pnpm i
pnpm build
```

--------------------------------

### Installation

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/wallet/README.md

Install the Immutable Wallet SDK using npm, yarn, or pnpm.

```APIDOC
## Installation

```bash
npm install @imtbl/wallet
# or
yarn add @imtbl/wallet
# or
pnpm add @imtbl/wallet
```
```

--------------------------------

### Create Environment File

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-wallet-balance-with-nextjs/tutorial.md

Copy the example environment file and add your Immutable Hub publishable API key.

```bash
cp .env.example .env

```

```dotenv
NEXT_PUBLIC_PUBLISHABLE_KEY=your_publishable_key_here
```

--------------------------------

### Test Examples

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/blockchain-data/README.md

Run tests to verify the functionality of the blockchain data API examples.

```bash
pnpm test
```

--------------------------------

### Install Dependencies

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/create-collection-bid-with-nextjs/tutorial.md

Installs project dependencies using pnpm. Ensure Node.js is installed before running.

```bash
pnpm i

```

--------------------------------

### Install Dependencies

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/commerce-widget-nextjs/README.md

Run this command to install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Navigate to Orderbook Example Directory

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/fulfill-collection-bid-with-nextjs/tutorial.md

Change directory into the specific Next.js orderbook example for collection bid fulfillment.

```bash
cd ts-immutable-sdk/examples/orderbook/fulfill-collection-bid-with-nextjs
```

--------------------------------

### Install Dependencies

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/README.md

Install the Immutable SDK and other required packages like @biom3/react and ethers.

```bash
pnpm add @imtbl/sdk
pnpm add @biom3/react
pnpm add ethers@^6.13.4
```

--------------------------------

### Install @imtbl/wallet SDK

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/wallet/README.md

Install the Immutable Wallet SDK using npm, yarn, or pnpm.

```bash
npm install @imtbl/wallet
# or
yarn add @imtbl/wallet
# or
pnpm add @imtbl/wallet
```

--------------------------------

### Install Dependencies

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/auth-next-client/README.md

Install the necessary packages for client-side and server-side Immutable authentication with NextAuth v5.

```bash
npm install @imtbl/auth-next-client @imtbl/auth-next-server next-auth@5
```

--------------------------------

### Install @imtbl/auth Package

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/auth/README.md

Use npm to install the @imtbl/auth package for authentication utilities.

```bash
npm install @imtbl/auth
```

--------------------------------

### Install @imtbl/auth-next-server and next-auth

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/auth-next-server/README.md

Install the necessary packages for server-side Immutable authentication with Auth.js v5 in your Next.js project.

```bash
npm install @imtbl/auth-next-server next-auth@5
# or
pnpm add @imtbl/auth-next-server next-auth@5
# or
yarn add @imtbl/auth-next-server next-auth@5
```

--------------------------------

### Install @imtbl/orderbook Package

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/orderbook/README.md

Install the orderbook package using npm, pnpm, or yarn.

```sh
npm add @imtbl/orderbook
# or
pnpm add @imtbl/orderbook
# or
yarn add @imtbl/orderbook
```

--------------------------------

### Install SDK package using file: protocol

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/README.md

Install a local build of an SDK package into an external project using the file protocol. This is useful for testing changes in a real-world application context.

```bash
"@imtbl/sdk": "file:../ts-immutable-sdk/imtbl-sdk-0.0.0.tgz",
```

--------------------------------

### Install Dependencies for Direct Auth Integration

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/wallet/README.md

Install the necessary packages for integrating @imtbl/wallet with @imtbl/auth for direct authentication control.

```bash
npm install @imtbl/wallet @imtbl/auth
```

--------------------------------

### Generate SDK Reference Documentation

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/CONTRIBUTING.md

Install dependencies, build the project, and then build the documentation. Run these commands from the root of the monorepo.

```sh
pnpm install
pnpm build
pnpm docs:build
```

--------------------------------

### Example App Directory Structure

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/contracts/_prompts/example-app-1-create-app-template.txt

This is the standard directory structure for a new example app using Next.js and the Immutable Contracts SDK. Ensure all files are placed correctly.

```tree
/examples/contracts/{ feature name }-with-nextjs/
├── src/app/
│ ├── page.tsx # Main landing page with feature links
│ ├── { feature name }/page.tsx # Primary feature implementation
│ ├── redirect/page.tsx # Auth redirect handler
│ ├── logout/page.tsx # Logout functionality
│ ├── utils/ # Shared utilities
│ │ ├── setupDefault.ts # SDK initialization
│ │ └── wrapper.tsx # App context wrapper
│ ├── layout.tsx # App layout with wrapper
│ └── globals.css # Basic styles
├── tests # Test directory
│ └── base.spec.ts # E2E Test file
├── README.md # Documentation
├── package.json # Dependencies
├── next.config.mjs # Next.js config
├── tsconfig.json # TypeScript config
├── .env.example # Environment variables
├── .gitignore # Git ignore file
├── playwright.config.ts # Playwright configuration
|── eslintrc.json                   # ESLint configuration
|── babel.config.jest.js            # Babel config for tests
└── features.json                   # JSON file showcasing the feature present in the { feature name } app
```

--------------------------------

### Install Dependencies for Next.js Integration

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/wallet/README.md

Install the necessary packages for integrating @imtbl/wallet with @imtbl/auth-next-client in a Next.js application.

```bash
npm install @imtbl/wallet @imtbl/auth-next-client @imtbl/auth-next-server next-auth@5
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/fulfill-bid-with-nextjs/tutorial.md

Clone the ts-immutable-sdk repository and navigate to the orderbook fulfillment example directory.

```bash
git clone https://github.com/immutable/ts-immutable-sdk.git
cd ts-immutable-sdk/examples/orderbook/fulfill-bid-with-nextjs
```

--------------------------------

### Example App File Structure

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/_prompts/example-app-1-create-app-template.txt

This is the standard file structure for a new example app generated for the Immutable Checkout SDK using Next.js. It includes directories for application code, tests, configuration, and documentation.

```tree
/examples/checkout/{feature name}-with-nextjs/
├── src/app/
│ ├── page.tsx # Main landing page with feature links
│ ├── {feature name}/page.tsx # Primary feature implementation
│ ├── redirect/page.tsx # Auth redirect handler
│ ├── logout/page.tsx # Logout functionality
│ ├── utils/ # Shared utilities
│ │ ├── setupDefault.ts # SDK initialization
│ │ └── wrapper.tsx # App context wrapper
│ ├── layout.tsx # App layout with wrapper
│ └── globals.css # Basic styles
├── tests # Test directory
│ └── base.spec.ts # E2E Test file
├── README.md # Documentation
├── package.json # Dependencies
├── next.config.mjs # Next.js config
├── tsconfig.json # TypeScript config
├── .env.example # Environment variables
├── .gitignore # Git ignore file
├── playwright.config.ts # Playwright configuration
|── eslintrc.json                   # ESLint configuration
|── babel.config.jest.js            # Babel config for tests
└── features.json                   # JSON file showcasing the feature present in the {feature name} app
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/setup-with-nextjs/README.md

Clone the ts-immutable-sdk repository and navigate to the passport-setup-with-nextjs example directory.

```bash
git clone https://github.com/immutable/ts-immutable-sdk.git
cd ts-immutable-sdk/examples/passport/passport-setup-with-nextjs
```

--------------------------------

### Install Checkout SDK Package

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/checkout/sdk/README.md

Use npm, pnpm, or yarn to add the Checkout SDK package to your project.

```sh
npm add @imtbl/checkout-sdk
# or
pnpm add @imtbl/checkout-sdk
# or
yarn add @imtbl/checkout-sdk
```

--------------------------------

### Clone Repository

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/tutorial.md

Clones the Immutable SDK repository to access examples.

```bash
git clone https://github.com/immutable/ts-immutable-sdk.git
cd ts-immutable-sdk/examples/checkout/sdk-connect-with-nextjs
```

--------------------------------

### Default Auth Login Button

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/auth-next-client/README.md

Example of a login button using useLogin hook with default authentication configuration, suitable for zero-config setups.

```tsx
// With default auth - no config needed
function LoginButton() {
  const { isAuthenticated } = useImmutableSession();
  const { loginWithPopup, isLoggingIn, error } = useLogin();

  if (isAuthenticated) return <p>You are logged in!</p>;

  return (
    <button onClick={() => loginWithPopup()} disabled={isLoggingIn}>
      {isLoggingIn ? "Signing in..." : "Sign In"}
    </button>
  );
}

```

--------------------------------

### Quickstart: Initialize Audience SDK (CDN)

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/audience/sdk/README.md

Load the Audience SDK via CDN and initialize it within your HTML. This method is suitable for applications without a bundler. It demonstrates basic page view tracking and event tracking.

```html
<script src="https://cdn.immutable.com/audience/v1/imtbl.js"></script>
<script>
  const { 
    init, AudienceError, AudienceEvents, 
    IdentityType, canTrack, canIdentify, 
  } = window.ImmutableAudience;
  const audience = init({
    publishableKey: 'YOUR_PUBLISHABLE_KEY',
    consent: 'anonymous',
    onError: (err) => console.error(err.code, err.message),
  });
  audience.page();
  audience.track(AudienceEvents.PURCHASE, { currency: 'USD', value: 9.99 });
</script>
```

--------------------------------

### Run Development Server

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-gas-estimation-with-nextjs/README.md

Start the development server using npm, pnpm, or bun. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
pnpm dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/create-bid-with-nextjs/README.md

Installs project dependencies using the pnpm package manager. Ensure Node.js is installed.

```bash
pnpm i
```

--------------------------------

### Quick Start

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/wallet/README.md

Connect to Immutable zkEVM and perform basic Ethereum operations like requesting accounts and sending transactions.

```APIDOC
## Quick Start

Connect to Immutable zkEVM with just a few lines of code:

```typescript
import { connectWallet } from '@imtbl/wallet';

// Create a wallet provider
const provider = await connectWallet();

// Request accounts (triggers login if user is not authenticated)
const accounts = await provider.request({ method: 'eth_requestAccounts' });
console.log('Connected:', accounts[0]);

// Send a transaction
const txHash = await provider.request({
  method: 'eth_sendTransaction',
  params: [{
    to: '0x...',
    value: '0x...',
  }],
});
```

That's it! The wallet handles authentication, user registration, and transaction signing automatically.
```

--------------------------------

### Serve SDK Documentation Locally

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/CONTRIBUTING.md

Serve the generated SDK documentation locally for preview. Run this command from the root of the monorepo.

```sh
pnpm docs:serve
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/README.md

Install the necessary browser binaries for Playwright to execute tests.

```bash
pnpm playwright install
```

--------------------------------

### Quickstart: Initialize Audience SDK (ESM)

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/audience/sdk/README.md

Initialize the Audience SDK with your publishable key and consent level. Handles errors and performs basic tracking actions. Ensure to call shutdown when the app unmounts.

```ts
import { Audience } from '@imtutorials/audience';

const audience = Audience.init({
  publishableKey: 'YOUR_PUBLISHABLE_KEY',
  consent: 'anonymous',
  onError: (err) => console.error(err.code, err.message),
});

audience.page();
audience.track('purchase', { currency: 'USD', value: 9.99 });
audience.identify('user@example.com', 'email', { name: 'Jane' });
audience.setConsent('full');

// when the app unmounts
audience.shutdown();
```

--------------------------------

### Install Immutable Webhook Package

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/webhook/sdk/README.md

Install the webhook package using npm, pnpm, or yarn.

```sh
npm add @imtbl/webhook
# or
pnpm add @imtbl/webhook
# or
yarn add @imtbl/webhook
```

--------------------------------

### Run Widgets Sample App with Local Build

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/checkout/CONTRIBUTING.md

Start the Widgets Sample App after building the Widgets Library in local mode. This command is run within the 'checkout-widgets-sample-app' package context.

```bash
# Run the Widgets Sample App in a new terminal
# Context: checkout-widgets-sample-app in ./widgets-sample-app
pnpm start
```

--------------------------------

### Run Widgets Sample App

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/checkout/CONTRIBUTING.md

Launch the Widgets Sample App with hot reloading. This requires the Checkout SDK and Widgets Library to be running first. Commands are run within their respective package contexts.

```bash
# Run the above two commands first
# ...

# Run the Widgets Sample App in a new terminal
# Context: checkout-widgets-sample-app in ./widgets-sample-app
pnpm start
```

--------------------------------

### Install Playwright Dev Dependency

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/README.md

Install the Playwright test runner as a development dependency using pnpm.

```bash
pnpm add -D @playwright/test@^1.45.3
```

--------------------------------

### Run the Sample App

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/audience/sdk-sample-app/README.md

Command to run the sample application using pnpm. This command builds the SDK and serves the sample app locally.

```sh
pnpm --filter @imtbl/audience-sdk-sample-app run dev
```

--------------------------------

### Build the App

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/commerce-widget-nextjs/README.md

Build the application for production deployment.

```bash
pnpm build
```

--------------------------------

### Initialize SDK with Consent

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/audience/sdk-sample-app/index.html

Pass the publishable key and environment to `init()`. The initial consent state can be set here. Use the Consent tab to transition consent states after initialization.

```javascript
init(publishableKey, environment, { initialConsent: 'none' });
```

--------------------------------

### Run Checkout SDK in Sandbox/Production Mode

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/checkout/CONTRIBUTING.md

Start the Checkout SDK in sandbox or production mode, connecting to the immutable-testnet or mainnet respectively. Configuration is based on the SANDBOX_CONFIGURATION environment variable. This command is run within the 'checkout-sdk' package context.

```bash
pnpm start
```

--------------------------------

### Install Java Runtime on Mac

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/internal/generated-clients/CONTRIBUTING.md

Command to install the Java runtime on macOS using Homebrew, a prerequisite for running view-generators.

```bash
brew install java
```

--------------------------------

### Start Development Watch Mode

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/README.md

Builds packages and starts watch mode for all packages in the monorepo. This is useful for continuous development.

```bash
# Context: Root of monorepo
pnpm dev
```

--------------------------------

### Tag Expression Examples for Test Filtering

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/tests/func-tests/zkevm/README.md

Examples of tag expressions used to filter Immutable SDK tests. Use `@registration` to run only tests with that tag, or `not @registration` to run all tests except those with the `@registration` tag.

```bash
@registration
```

```bash
not @registration
```

--------------------------------

### Example App Directory Structure

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/_prompts/example-app-1-create-app-template.txt

Defines the file and directory structure for a new Next.js example app demonstrating an Immutable Passport SDK feature. This structure includes application code, tests, configuration files, and documentation.

```tree
/examples/passport/{feature name}-with-nextjs/
├── src/app/
│ ├── page.tsx # Main landing page with feature links
│ ├── {feature name}/page.tsx # Primary feature implementation
│ ├── redirect/page.tsx # Auth redirect handler
│ ├── logout/page.tsx # Logout functionality
│ ├── utils/ # Shared utilities
│ │ ├── setupDefault.ts # SDK initialization
│ │ └── wrapper.tsx # App context wrapper
│ ├── layout.tsx # App layout with wrapper
│ └── globals.css # Basic styles
├── tests # Test directory
│ └── base.spec.ts # E2E Test file
├── README.md # Documentation
├── package.json # Dependencies
├── next.config.mjs # Next.js config
├── tsconfig.json # TypeScript config
├── .env.example # Environment variables
├── .gitignore # Git ignore file
├── playwright.config.ts # Playwright configuration
|── eslintrc.json                   # ESLint configuration
|── babel.config.jest.js            # Babel config for tests
└── features.json                   # JSON file showcasing the feature present in the {feature name} app
```

--------------------------------

### Run Checkout SDK Sample App

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/packages/checkout/CONTRIBUTING.md

Launch the Checkout SDK Sample App with hot reloading enabled. Ensure the Checkout SDK is running first in its own terminal. This command is run within the 'checkout-sdk-sample-app' package context.

```bash
# Run the Checkout SDK first
# Context: checkout-sdk in ./sdk
pnpm start

# Run the Checkout SDK Sample App in a new terminal
# Context: checkout-sdk-sample-app in ./sdk-sample-app
pnpm start
```

--------------------------------

### Project Structure for Next.js Example App

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/orderbook/_prompts/example-app-1-create-app-template.txt

Defines the directory and file structure for a new Next.js example application demonstrating a specific feature of the Immutable Orderbook SDK. This structure includes app routing, utilities, tests, and configuration files.

```plaintext
/examples/orderbook/{feature name}-with-nextjs/
├── src/app/
│ ├── page.tsx # Main landing page with feature links
│ ├── {feature name}/page.tsx # Primary feature implementation
│ ├── redirect/page.tsx # Auth redirect handler
│ ├── logout/page.tsx # Logout functionality
│ ├── utils/ # Shared utilities
│ │ ├── setupDefault.ts # SDK initialization
│ │ └── wrapper.tsx # App context wrapper
│ ├── layout.tsx # App layout with wrapper
│ └── globals.css # Basic styles
├── tests # Test directory
│ └── base.spec.ts # E2E Test file
├── README.md # Documentation
├── package.json # Dependencies
├── next.config.mjs # Next.js config
├── tsconfig.json # TypeScript config
├── .env.example # Environment variables
├── .gitignore # Git ignore file
├── playwright.config.ts # Playwright configuration
|── eslintrc.json                   # ESLint configuration
|── babel.config.jest.js            # Babel config for tests
└── features.json                   # JSON file showcasing the feature present in the {feature name} app
```

--------------------------------

### Clone the Repository

Source: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/setup-with-nextjs/tutorial.md

Clone the ts-immutable-sdk repository to access the example applications.

```bash
git clone https://github.com/immutable/ts-immutable-sdk.git
cd ts-immutable-sdk/examples/passport/setup-with-nextjs
```