-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Framework-aware Hosting (NextJS): Copy configuration files to created function #6826
Description
[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.jsalongsidenext.config.js - Add
appWithTranslationto your_apppage - Add
serverSideTranslationsto e.g. your index page - Add a
Transcomponent to utilise a key from your common.json file(s)
Optional, test locally:
npm run dev- Visit
http://localhost:3000and 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
-
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.
-
next-i18next does seem to have some support for the location of the
next-i18next.config.jsfile via theI18NEXT_DEFAULT_CONFIG_PATH. However, this seems tied to the location of thenext.config.jsfile, which I believe the web framework hosting tool expects in a specific location. -
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.