How to deploy a next js project with firebase ?

1. npm install -g firebase-tools

2. firebase login

3. firebase init

* select option: hosting-> using space bar

* Select project

? What do you want to use as your public directory? dist

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? No

? File build/index.html already exists. Overwrite? No

#for next.js we have to enable the frame work and Deploy the app as single page application 

1. For enabling it use command: firebase experiments:enable webframeworks

2. Then type the command: “firebase init”

Follow the step for deploying the app to firebase as a single page application

 a. Are you ready to proceed? Yes

 b. Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for   

  “Firebase Hosting and (optionally) set up GitHub Action deploys”

 c. Detected an existing Next.js codebase in the current directory, should we use this? No

 d. Do you want to use a web framework? (experimental) No

 e. What do you want to use as your public directory? out

 f. Configure as a single-page app (rewrite all urls to /index.html)? Yes

 g. Set up automatic builds and deploys with GitHub? No

 #If the “out” folder is already exists/ or you already deployed the app once, then this command will come

 h. File out/index.html already exists. Overwrite? (y/N) Yes

3. After firebase init done, run the commond “npm run build” for building the application.

4. After running the build, deploy the application to firebase using “firebase deploy”

5. Add “ “cleanUrls”:true “ on firebase.json file below “ “public”:”out” “ on hosting 

6. Then again deploy the project to firebase: “firebase deploy” 

Leave a comment

Your email address will not be published. Required fields are marked *