# Examples and Boilerplates

## Boilerplates

* [Next.js Bundle Builder Boilerplate](https://github.com/firmhouse/nextjs-bundle-builder-boilerplate)

<div align="left"><figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-b229badd2532881351487ec85cbbfdae2d705df5%2Fnextjs-bundle-builder-flow.webp?alt=media" alt=""><figcaption></figcaption></figure></div>

This boilerplate is a Next.js project that provides a starting point for building a bundle builder flow. You can check out [the GitHub repository](https://github.com/firmhouse/nextjs-bundle-builder-boilerplate) for more information on how to get started using this boilerplate.

## Examples

* [Product as Service subscription Storefront example built with Next.js App router](https://github.com/firmhouse/firmhouse-sdk/tree/main/examples/nextjs/storefront-app-router). Check out the [live demo](https://firmhouse-sdk-nextjs-pages-router.vercel.app/)

<div><figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-221abf8656aa396b495f1f7e9406dfa15a79fd13%2Fapp-router-example-product.jpg?alt=media" alt=""><figcaption><p>Product &#x26; Plan selection page</p></figcaption></figure> <figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-cea578d2050dc758f8dadfc5e89c984b7408a733%2Fapp-router-example-custom-checkout.jpg?alt=media" alt=""><figcaption><p>Custom checkout</p></figcaption></figure></div>

* [Smart Order-based subscription Storefront example built with Next.js Pages router](https://github.com/firmhouse/firmhouse-sdk/tree/main/examples/nextjs/storefront-pages-router). Check out the [live demo](https://firmhouse-sdk-self-service-center.vercel.app/)

<figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-a876d837275564e59daf2432d300f6605a33342a%2Fpages-router-example.jpg?alt=media" alt=""><figcaption><p>Product selection page</p></figcaption></figure>

* [Custom Self-Service Center example built with Next.js App router](https://github.com/firmhouse/firmhouse-sdk/tree/main/examples/nextjs/self-service-center)

<div><figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-c9950cef00091cab646a3ea4a86c0ff9464c6e20%2Fssc-example-login.jpg?alt=media" alt=""><figcaption><p>Login</p></figcaption></figure> <figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-9a21a72ae16008e528c543390675f65dd2357677%2Fssc-example-email-not.jpg?alt=media" alt=""><figcaption><p>Email notification</p></figcaption></figure> <figure><img src="https://2065262705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbA6hGFVeEriQvTMtvtQ%2Fuploads%2Fgit-blob-b5f929d10a947107b7cb776a2d2b876591556188%2Fssc-example-subs.jpg?alt=media" alt=""><figcaption><p>Subscription</p></figcaption></figure></div>