Skip to content

Framework-aware Hosting (NextJS): Copy configuration files to created function #6826

@jmgirven

Description

@jmgirven

[REQUIRED] Environment info

firebase-tools: 13.4.0

Platform: Ubuntu (inside WSL)

[REQUIRED] Test case

I would like to have a NextJS project, which is deployed to Firebase Hosting using the early preview of Framework-aware Hosting: https://firebase.google.com/docs/hosting/frameworks/nextjs. However, I need the created Firebase Function to have a configuration file copied across to the root of the function. Without this config file, the NextJS application does not run.

This could apply in many situations, but my specific situation is using the next-i18next library. My application also requires server side rendering, therefore the Firebase Framework-aware Hosting tool will create a Firebase Function to run the application. To work, next-i18next expects a next-i18next.config.js config file in the root of the project, both before and after building the application.

[REQUIRED] Steps to reproduce

Step 1: Create a NextJS template project

E.g:

npx create-next-app@latest

with the following options:

What is your project named? … next-i18next-test
Would you like to use TypeScript? … Yes
Would you like to use ESLint? … Yes
Would you like to use Tailwind CSS? … Yes
Would you like to use `src/` directory? … Yes
Would you like to use App Router? (recommended) … No
Would you like to customize the default import alias (@/*)? … No

Step 2: Install next-i18next

Following the instructions in the readme here: https://github.com/i18next/next-i18next

Summary:

  • npm install --save next-i18next react-i18next i18next
  • Create translation content in public/locales/
  • Create a next-i18next.config.js alongside next.config.js
  • Add appWithTranslation to your _app page
  • Add serverSideTranslations to e.g. your index page
  • Add a Trans component to utilise a key from your common.json file(s)

Optional, test locally:

  • npm run dev
  • Visit http://localhost:3000 and compare with your alternative language e.g. http://localhost:3000/de

Step 3: Initialise Firebase Hosting

Following the guide at https://firebase.google.com/docs/hosting/frameworks/nextjs

firebase experiments:enable webframeworks
firebase init hosting

Step 4: Deploy to Firebase Hosting

firebase deploy

[REQUIRED] Expected behavior

The page should deploy to Firebase Hosting with the experimental web framework support. You should be able to see the page being translated into the specified languages. The function code should contain a file next-i18next.config.js at the root.

[REQUIRED] Actual behavior

The deployed page fails to load (500 error). The created function code does not have a file next-i18next.config.js at the root of the function. It is not copied across.

The function logs show the error message: Error: next-i18next was unable to find a user config at /workspace/next-i18next.config.js.

Possible workarounds for next-i18next specifically

  1. If I switch from using NextJS pages to a NextJS app directory I believe the next-i18next package is redundant, so this problem would go away. To be confirmed.

  2. next-i18next does seem to have some support for the location of the next-i18next.config.js file via the I18NEXT_DEFAULT_CONFIG_PATH. However, this seems tied to the location of the next.config.js file, which I believe the web framework hosting tool expects in a specific location.

  3. Leave the experimental web framework support and build the function / hosting myself.

However, being able to generically specify which files to be included in the function seems like it might be a useful feature. Even outside of this usecase.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions