Setting up Orderly SDK in a Next.js project.

1

Create your project

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

npx create-next-app@latest my-exchange --app --typescript --eslint
cd my-exchange
2

Add Orderly SDK

npm install @orderly.network/react
3

Add new route

Next.js has two routing modes: Page Router and App Router. Here we take App mode as an example. For more information about App Router, please refer to Next.js documentation.

Create a new trade/[symbol] directory under the /app directory, create a page.tsx file, and add the following code:

page.tsx
import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
import { ConnectorProvider } from "@orderly.network/web3-onboard";

export default function Trading({ params }: { params: { symbol: string } }) {
  return (
    <ConnectorProvider
      apiKey="<Your web3-onboard's api key>"
      options={`<options>`}
    >
      <OrderlyAppProvider
        networkId="testnet"
        brokerId="<Your broker id>"
        brokerName="<Your name>"
        appIcons={...}
      >
        <TradingPage
          symbol={params.symbol}
          tradingViewConfig={`tradingView config`}
          onSymbolChange={`onSymbolChange handler`}
        />
      </OrderlyAppProvider>
    </ConnectorProvider>
  );
}
4

Import style

page.tsx
import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
import { ConnectorProvider } from "@orderly.network/web3-onboard";
import "@orderly.network/react/dist/styles.css";

export default function Trading() {
  return {
    /* ... */
  };
}
5

Done

Now you can start your project and access the /trade/PERP_ETH_USDC route, you will see a complete exchange page.

npm run dev
Wallet connectTradingPage