If you're new to Next.js, you can learn about it here: nextjs.org If you haven't heard of Firebase, you can learn about that too: firebase.google.com

Uploading a Next.js project to Firebase Summary:

For static site generation: Place the contents of your Next.js static export, the 'out' folder, into your firebase project's 'public' directory and run firebase deploy --only hosting. To export your static site, make sure you have the output: 'standalone' parameter added to your nextConfig, and change the build script in your package.json file from next build to next build && next export.

For server side rendering: Run firebase deploy directly inside of your Next.js project. This requires the blaze plan from firebase and your firebase project to be initialized directly inside of your Next.js project directory.

Continue reading for a more in depth explanation of the initialization and deployment process.

Upload your Next.js website to firebase using Static Site Generation (SSG)

// for static site generation
const nextConfig = {
  output: 'standalone', 
  },
}

nextConfig // for SSG

The standalone parameter tells Next to render your html, css, and js to an 'out' folder, which is what we'll actually be uploading to firebase.

const nextConfig = {
  output: 'standalone', 
  images: { 
    unoptimized: true, 
  },
}

Optionally, you can set unoptimized to true in the image configuration settings of nextConfig. Image optimization requires a cloud function within our firebase project. Even though this is automatically established when uploading a build, it requires a higher priced tier than the spark (free) plan.

Prepare your firebase project Let's get started. We'll assume you already have a firebase account/project and the firebase CLI tool installed.

This public directory is our website, and is what will be uploaded to firebase. You can technically place any HTML codebase into this folder (public/index.html is your homepage), and firebase will serve the files just like any other hosting service would. The difference is that instead of connecting to it through File Transfer Protocol (FTP), we will deploy our public directory to place the files on the server.

Export your static files To render your files from a Next.js project, make sure to add the output: 'standalone' parameter key and value to your nextConfig like specified above. When running next build, Next will compile and write the html, css and js files to an 'out' folder in the root of your project directory.

Here's the Next.js config file for this site, zacharypagliaro.com:

// @type {import('next').NextConfig}
const nextConfig = {
  reactStrictMode: true,
  output: 'standalone',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

next.config.js

And the scripts section of package.json:

"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint",
"tailwind-script": "npx tailwindcss -i ./styles/globals.css -o ./tailwind.css -w"
},

package.json

After confirming everything is configured,

Once finished you should find that your files were written to the 'out' folder in your Next.js project's root directory.

Upload your static website Once you have a static html based website exported,

You should see the progress as it uploads. Your website should now be available at the returned firebase web app link!

Upload your website to firebase using Server Side Rendering (SSR).

const nextConfig = {
  distDir: "build", 
}

nextConfig // for SSR

This creates a build folder in the root of your project's directory when you run the build command. When uploading a Next.js project utilizing server side rendering to firebase, the (experimental) deployment process will actually create it's own build folder. So this isn't exactly necessary, but it's probably useful to have an exported production version of your site. Here's my whole next.config.js file for an SSR project:

// @type {import('next').NextConfig}
const nextConfig = {
  distDir: "build",
  reactStrictMode: true,
  images: {
    domains: ['firebasestorage.googleapis.com'],
  },
}

module.exports = nextConfig

next.config.js // for an SSR project using firebase

Prepare firebase Unlike the static site export method, we'll be initializing firebase directly inside of our project folder. Navigate to the root of your project folder and run firebase init. It will present you with a list of your web projects, choose the one you'd like to upload your site to.

Deploy your web app Once initialized, you can run firebase deploy and the build & deployment processes should start. Again, it's a good measure to enable the site as a single page app if it asks, so all invalid urls are redirected to the home page. Firebase will also ask if you'd like to setup automatic github deployment, which I usually decline, although it's probably a good idea in most cases for an average user. At this point, Firebase should have detected that the project is a Next.js codebase and ask if you'd like to enable "experimental" web frameworks, which - yes, you want to agree to that.

That's it ! The firebase CLI tool should take over and create the necessary distribution folders, which are kept inside of the '.firebase' directory of your project. It will build the app and configure a node server to run your Next.js codebase. The compiler may have new errors that you weren't seeing before. Also you need to be on the blaze (paid/pay as you go) tier from firebase to continue at this point. Firebase will determine that the server for our account needs to employ SSR and a cloud function to enable it, and if you're not on the paid plan, i.e., firebase has your payment info, then it will block the process before actually deploying your project.

If you have set up the necessary billing info and corrected any errors it's identified, you should be good to go after running firebase deploy. You should be able to see your live website at the returned firebase web app link.

The differences between SSG and SSR

Even though firebase will alert you that its web framework support for Next.js is experimental, I've had a lot of success with using their services for my web projects. Actually, this site is hosted with a firebase project on the spark plan, and it actually doesn't use the experimental web framework from firebase. This is a completely static site, rendered to html and "minimal javascript" to hydrate the pages and make them interactive, as the Next documentation puts it.

When uploading a Next.js project to any hosting service, it can be done in several formats. The real difference between these formats is different degrees of either rendering your data/site at build time (SSG), or if you need to handle dynamic data, uploading a project that can continuously build your site for clients using SSR, which will compile your web app every time a user loads the page.

Which ever you decide to go with, you should always be optimizing your pages by using getStaticPaths and getStaticProps whenever you can. Next.js is capable of assembling hybrid websites that can utilize the speed and SEO benefits of static site generation while still being able to handle live data with getServerSideProps and getInitialProps.

For more information, here are some great posts online that I learned from: Data Fetching With Next.js - maximeheckel.com Server Side Rendering documentation - nextjs.org Client Side Rendering documentation - nextjs.org Static Site Generation documentation - nextjs.org