Deploying a Next.js app on Firebase Hosting involves a few steps. Here’s a basic guide to get you started:
Step 1: Install Firebase Tools
Make sure you have Node.js and npm installed, then install Firebase Tools globally if you haven’t already:
Step 2: Initialize Firebase
If you haven’t already set up Firebase for your project, initialize Firebase in your project directory:
firebase init
Select Firebase features you want to use. Make sure to select Hosting and follow the prompts to set up your Firebase project.
Step 3: Build Your Next.js App
Before deploying, build your Next.js app for production:
Step 4: Configure Firebase for Next.js
Create a firebase.json file in the root of your project (if it doesn’t exist) or modify it to include:
“hosting”: {
“public”: “out”,
“rewrites”: [
{
“source”: “**”,
“function”: “nextApp”
}
]
},
“functions”: {
“source”: “functions”
}
}
Step 5: Set up Firebase Functions (if needed)
If you are using API routes or server-side rendering with Next.js, you’ll need to set up Firebase Functions.
Create a functions folder in your project root.
Create an index.js file inside functions with something like this:
const next = require(‘next‘);
const dev = process.env.NODE_ENV !== ‘production‘;
const app = next({ dev, conf: { publicRuntimeConfig: { foo: ‘bar‘ } } });
const handle = app.getRequestHandler();
exports.nextApp = functions.https.onRequest((req, res) => {
return app.prepare().then(() => handle(req, res));
});
Install necessary dependencies:
Step 6: Deploy to Firebase
Now, you’re ready to deploy your app to Firebase Hosting:
Additional Notes
If you have environment variables, you can use Firebase environment configuration or a .env file with dotenv to manage them.
Make sure your Next.js app is set up properly for Firebase, especially if you’re using client-side routing or APIs.
Always check the Firebase Hosting URL to see if your app deployed successfully.
This should get your Next.js app up and running on Firebase Hosting!
