michalsanger/nextjs-fbt

FBT used in Next.js project with Typescript

This is a demo app of FBT used in Next.js with Typescript. See it in action: nextjs-fbt.vercel.app

Getting Started

FBT itself works great, but its installation requires a few tricks.

Peer dependency error

When you run npm install fbt to install the package, it fails with this error:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"0.12.0 - 17.x.x" from fbt@1.0.0
npm ERR! node_modules/fbt
npm ERR!   fbt@"*" from the root project

It is a known issue, before it is fixed in the new version, it needs to be fixed manually in package.json:

"overrides": {
  "fbt@1.0.0": {
    "react": "18.2.0"
  }
}

Babel setup

In addition to two mandatory plugins (babel-plugin-fbt and babel-plugin-fbt-runtime), you need to setup Babel so that this error does not occur:

Error: Line 27 Column 11: fbt is not bound. Did you forget to require('fbt')?

Why this error happens and one way how to fix it is explained here.

A simpler fix due to @adeira/babel-preset-adeira is used in this project:

nextjs-fbt/.babelrc.js

Lines 1 to 7 in 746a6a6

	module.exports = {
	presets: [
	"@adeira/babel-preset-adeira",
	["@babel/preset-typescript", { onlyRemoveTypeImports: true }],
	],
	plugins: ["babel-plugin-fbt", "babel-plugin-fbt-runtime"],
	};

NPM scripts

Collecting and translating with FBT is a three step process for which three NPM scripts are prepared:

nextjs-fbt/package.json

Lines 13 to 16 in 746a6a6

	"fbt:manifest": "fbt-manifest --src=src --enum-manifest=translations/enum_manifest.json --src-manifest=translations/src_manifest.json",
	"fbt:collect": "fbt-collect --options=__self --pretty --manifest < translations/src_manifest.json > translations/source_strings.json",
	"fbt:translate": "fbt-translate --source-strings=translations/source_strings.json --pretty --translations translations/translated/*.json --output-dir=translations/processed --jenkins",
	"fbt": "npm run fbt:manifest && npm run fbt:collect && npm run fbt:translate",

I recommend to run them all at once with npm run fbt.

Prettier on generated files

If you use npm run fbt then postfbt script will be executed automatically to format generated files with Prettier. I find it useful for git diff, code review etc to have those files nicely formatted.