title: How can I setup Firebase hosting multisites with Nextjs
body: <p>I'm trying to deploy nextjs app to firebase hosting and want to support multiple site. When I deploy it all app renders the default app. How can I fix this?</p>
  
  <p>I was following the tutorial <a href="https://angularfirebase.com/lessons/deploy-multiple-sites-to-firebase-hosting/" rel="nofollow noreferrer">here</a> on Deploying multiple sites to firebase using AngularJs and I tried to replace Angularjs with NextJs</p>
  
  <p><strong>scripts in package.json</strong></p>
  
  <pre><code>{
    "scripts": {
      "accounts": "next \"src/apps/accounts/\"",
      "accounts-build": "next build \"src/apps/accounts/\"",
  
      "admin": "next \"src/apps/admin/\"",
      "admin-build": "next build \"src/apps/admin/\"",
      "preserve": "npm run build-public &amp;&amp; npm run build-funcs &amp;&amp; npm run admin-build &amp;&amp; npm run copy-deps &amp;&amp; npm run install-deps",
      "serve": "cross-env NODE_ENV=production firebase serve",
      "predeploy": "npm run build-public &amp;&amp; npm run build-funcs &amp;&amp; npm run accounts-build &amp;&amp; npm run admin-build &amp;&amp; npm run copy-deps",
      "deploy": "firebase deploy",
      "clean": "rimraf \"dist/functions/**\" &amp;&amp; rimraf \"dist/public\"",
      "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
      "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
      "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
      "install-deps": "cd \"dist/functions\" &amp;&amp; npm i"
    }
  }
  </code></pre>
  
  <p><strong>firebase.json</strong></p>
  
  <pre><code>{
    "hosting": [
      {
        "target": "accounts",
        "public": "dist/public",
        "rewrites": [
          {
            "source": "**/**",
            "function": "accounts"
          }
        ]
      },
      {
        "target": "admin",
        "public": "dist/public",
        "rewrites": [
          {
            "source": "**/**",
            "function": "admin"
          }
        ]
      }
    ],
    "functions": {
      "source": "dist/functions"
    }
  }
  </code></pre>
  
  <p><strong>.firebaserc</strong></p>
  
  <pre><code>{
    "projects": {
      "default": "example-app"
    },
    "targets": {
      "example-app": {
        "hosting": {
          "accounts": [
            "example-accounts"
          ],
          "admin": [
            "example-admin"
          ]
        }
      }
    }
  }
  </code></pre>
  
  <p><strong>index.js in functions</strong></p>
  
  <pre><code>import {https} from 'firebase-functions'
  
  const dev = process.env.NODE_ENV !== 'production'
  const app = require('next')({dev, conf: {distDir: 'next'}})
  const handle = app.getRequestHandler()
  
  const accounts = https.onRequest((req, res) =&gt;
      app.prepare().then(() =&gt; handle(req, res)))
  
  const admin = https.onRequest((req, res) =&gt;
      app.prepare().then(() =&gt; handle(req, res)))
  
  export {accounts, admin}
  </code></pre>
  
  <p><strong>next.config.js moved it to the root folder</strong></p>
  
  <pre><code>module.exports = {
    distDir: '../../../dist/functions/next'
  }
  </code></pre>
  
  <p>All app render the default Accounts App. would like the admin to render the admin app.</p>