This is a Next.js project bootstrapped with create-next-app.

This project uses TinaCMS and a custom middleware that allows for a multi-domain architecture.

The purpose of this repository is to host the product pages for SSW's custom software.

Running this project locally?

1. Copy .env.example to .env

2. Install Dependencies

yarn install

3. Run the development server:

yarn dev

4. Open http://localhost:3000 with your browser to see the result.

5. You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

To add an extra tenant/ domain you must

1. Head to the Vercel instance of this project

2. Navigate to Settings | Environment Variables

3. Edit the NEXT_PUBLIC_PRODUCT_LIST adding an extra object into the JSON object

Ex: {"product": "YakShaver", "domain": "www.yakshaver.ai"}

4. Head to the Tina Cloud instance of this project

5. Under Overview | Site URLs, add the domain URL that you added to the Vercel environment variable

How does the MiddleWare work?

Context: Our file structure within our app router looks like

|- app
|   |- page.tsx
|   |- [product]
|          |- [filename]
|                  |- page.tsx

When the user serves the site a respective domain (i.e think www.YakShaver.ai), it will try to find a respective product mapping from the NEXT_PUBLIC_PRODUCT_LIST. If it successfully finds a product, it will fill the [product] dynamic mapping with the product value found from the NEXT_PUBLIC_PRODUCT_LIST. Then when it comes to serving data, our page.tsx will use relativePath: ${product}/home.json using the specific product it found related to the domain.

This also means we have to set up the file structure for where we store our content. This is how we've organised our content structure;

|- content
      |- blogs
      |- footer
      ... other TinaCMS collections
      |- pages
           |- Product1
                 |- home.json
           |- Product2
                 |- home.json

Note in this instance Product1 and Product2 are just the product names such like YakShaver or TimePro

Wanting to use the Middleware for your own site?

We've documented how we use this middleware for our own sites and clients - Do you know how to use single codebase for multiple domains with TinaCMS and Next.js?