# Next.js Integration



<Info>
  Check out our [Next.js example
  repository](https://github.com/trysurface/form-nextjs-example) on GitHub,
  which includes implementations for both App Router and Page Router.
</Info>

<Tabs>
  <Tab title="App Router">
    <CardGroup cols="2">
      <Card title="Step 1: Embed Surface Tag" icon="code" href="/guides/embedding/next/app-router/embedding">
        Add Surface Tag to your Next.js site with custom code components
      </Card>

      <Card title="Step 2: Inline" icon="window" href="/guides/embedding/next/app-router/inline">
        Embed Surface Forms directly in your Next.js applications
      </Card>

      <Card icon="envelope" title="Step 2: Email Input Field Trigger" href="/guides/embedding/next/app-router/input-field">
        Trigger Popup and Slideover via email input field submission
      </Card>

      <Card title="Step 2: Popup" icon="square-up-right" href="/guides/embedding/next/app-router/popup">
        Display forms in modal overlays triggered by user interactions
      </Card>

      <Card title="Step 2: Slideover" icon="sidebar" href="/guides/embedding/next/app-router/slideover">
        Show forms that slide in from the side of the screen
      </Card>

      <Card title="Step 3: Optimize" icon="gauge-high" href="/guides/embedding/next/app-router/optimize">
        Optimize form loading speed and user experience
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Page Router">
    <CardGroup cols="2">
      <Card title="Step 1: Embed Surface Tag" icon="code" href="/guides/embedding/next/page-router/embedding">
        Add Surface Tag to your Next.js site with custom code components
      </Card>

      <Card title="Step 2: Inline" icon="window" href="/guides/embedding/next/page-router/inline">
        Embed Surface Forms directly in your Next.js applications
      </Card>

      <Card icon="envelope" title="Step 2: Email Input Field Trigger" href="/guides/embedding/next/page-router/input-field">
        Trigger Popup and Slideover via email input field submission
      </Card>

      <Card title="Step 2: Popup" icon="square-up-right" href="/guides/embedding/next/page-router/popup">
        Display forms in modal overlays triggered by user interactions
      </Card>

      <Card title="Step 2: Slideover" icon="sidebar" href="/guides/embedding/next/page-router/slideover">
        Show forms that slide in from the side of the screen
      </Card>

      <Card title="Step 3: Optimize" icon="gauge-high" href="/guides/embedding/next/page-router/optimize">
        Optimize form loading speed and user experience
      </Card>
    </CardGroup>
  </Tab>
</Tabs>