CODEWITHSUNDEEP
firebasenext.jsfirebase-hostinggoogle-cloud-run
1man
1man

Reputation: 5654

Firebase Hosting "rewrites" to Access Next.js App on Google Cloud Run

We're using Firebase Hosting. We have a Next.js app, called "knowledge", deployed on Google Cloud Run in the same GCP project. We followed the instructions in the Firebase documentation. Our firebase.json is as follows:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/knowledge{,/**}",
        "run": {
          "serviceId": "knowledge",
          "region": "us-central1"
        }
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

We want every request to "/knowledge{,/**}" for server-side rendering through our Next.js app on Cloud Run. When we open any of these pages, it loaded, but it does not load any of the static file, showing many errors like the following in the console:

Uncaught SyntaxError: Unexpected token '<' (at webpack-df4cf1c8d23aa877.js:1:1)
framework-81da43a8dcd978d9.js:1

Our next.config.js is as follows:

module.exports = {
  async rewrite() {
    return [
      {
        source: "/knowledge",
        destination: "/",
      },
    ];
  },
  images: {
    domains: ["firebasestorage.googleapis.com"],
  },
};

Upvotes: 0

Views: 1007

Answers (1)

kswork
kswork

Reputation: 1

Static files will be under /_next/, so add '/path*'.

module.exports = {
  async rewrite() {
    return [
      {
        source: "/knowledge",
        destination: "/",
      },
      {
        source: "/knowledge/:path*",
        destination: "/:path*",
      },
    ];
  },
  images: {
    domains: ["firebasestorage.googleapis.com"],
  },
};

Upvotes: 0

Related Questions