# @fab/nextjs > FAB compiler for NextJS projects Latest version **0.4.1** (published 2020-01-09) · MIT license · 0 weekly downloads ## Install ```sh npm install @fab/nextjs pnpm add @fab/nextjs yarn add @fab/nextjs bun add @fab/nextjs ``` Provides the command `fab-nextjs`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.4.1 | | Published | 2020-01-09 | | First published | 2018-12-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=8.0.0 | | Dependencies | 14 | | Unpacked size | 55.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 572 | | Author | Glen Maddern @geelen | | Maintainers | evanderkoogh, geelen | | Keywords | oclif | ## Links - npm: https://www.npmjs.com/package/@fab/nextjs - Repository: https://github.com/fab-spec/fab - Issues: https://github.com/fab-spec/fab/issues - npm.io page: https://npm.io/package/@fab/nextjs ## Dependencies (14) - [chalk](https://npm.io/package/chalk.md) ^2.4.1 - [memfs](https://npm.io/package/memfs.md) 2.12.1 - [tslib](https://npm.io/package/tslib.md) ^1 - [globby](https://npm.io/package/globby.md) ^8.0.1 - [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.1 - [prettier](https://npm.io/package/prettier.md) ^1.16.4 - [@fab/compile](https://npm.io/package/@fab/compile.md) ^0.3.2 - [@types/chalk](https://npm.io/package/@types/chalk.md) ^2.2.0 - [@oclif/config](https://npm.io/package/@oclif/config.md) ^1 - [@types/globby](https://npm.io/package/@types/globby.md) ^8.0.0 - [@oclif/command](https://npm.io/package/@oclif/command.md) ^1 - [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^5.0.4 - [@oclif/plugin-help](https://npm.io/package/@oclif/plugin-help.md) ^2 - [mock-express-response](https://npm.io/package/mock-express-response.md) ^0.2.2 ## Alternatives - [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads - [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads - [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads - [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads - [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads ## Recent versions - 0.4.1 (latest) — 2020-01-09 - 0.4.0-0 (prerelease) — 2019-08-27 - 0.4.0 — 2019-09-03 - 0.3.2 — 2019-06-13 - 0.3.1 — 2019-06-13 - 0.3.0 — 2019-06-13 - 0.2.0 — 2019-06-06 - 0.1.2 — 2019-03-13 - 0.1.1 — 2019-03-12 - 0.1.0 — 2019-03-12 - 0.1.0-5 — 2019-03-12 - 0.1.0-4 — 2019-03-12 - 0.1.0-3 — 2019-03-08 - 0.1.0-2 — 2019-03-08 - 0.1.0-1 — 2019-03-08 - … 2 more at https://npm.io/package/@fab/nextjs/versions ## README --- name: "@fab/nextjs" route: "/packages/fab-nextjs" menu: Packages --- # 💎 @fab/nextjs Builds a NextJS9+ app into a FAB. NextJS is a tricky target for FABs, as it, like a lot of NodeJS server-side JS projects, assumes a fair bit about the environment it runs on. Since version 8, Next has offered two build targets: NodeJS & Serverless. The serverless build has stripped out a lot of the old assumptions and generates a single file per "route" for NextJS. Each of these files shares a lot with each other, so `@fab/nextjs` merges these and wraps them in a FAB adapter, so that you end up with a single-file entry point. In version 9, [path-based Dynamic Routing](https://github.com/zeit/next.js#dynamic-routing) was added, removing a lot of the need for a custom server. This makes `@fab/nextjs` a lot simpler, so we recommend upgrading to Next 9 first. [![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io) [![Version](https://img.shields.io/npm/v/@fab/nextjs.svg)](https://npmjs.org/package/@fab/nextjs) [![Downloads/week](https://img.shields.io/npm/dw/@fab/nextjs.svg)](https://npmjs.org/package/@fab/nextjs) [![License](https://img.shields.io/npm/l/@fab/nextjs.svg)](https://github.com/fab-spec/fab/blob/master/package.json) ## Getting Started Install `@fab/nextjs` as a development dependency: ``` yarn add --dev @fab/nextjs npm install --dev @fab/nextjs ``` In your `next.config.js` file, ensure that you're on the `serverless` build target, and we recommend using an `assetPrefix` of `/_assets`: ```js const isProd = process.env.NODE_ENV === 'production' module.exports = { target: 'serverless', assetPrefix: isProd ? '/_assets' : '' } ``` > See [this issue](https://github.com/zeit/next.js/issues/8605) as to why `isProd` is needed Add scripts to your `package.json`: ```diff "scripts": { "build": "[your existing build step]", + "build:fab": "npm run build && npm run fab:compile", + "fab:compile": "fab-nextjs build" } ``` We've added two scripts here, `fab:compile` which runs the `fab-nextjs` builder, and `build:fab` that builds the project first. Most of the time, and especially you're using a FAB-enabled platform like [linc.sh](https://linc.sh), you'll mostly run `build:fab`, but having a separate `fab:compile` step can be handy as you set things up. You can test it out by running: ``` npm run build:fab ``` Once this is complete, you should have a `fab.zip` file (and a `.fab` directory with a bunch of build files). Those don't need to be checked in to your repository, so you can add them to your `.gitignore` file with this one-liner: ``` echo "\n.fab\nfab.zip" >> .gitignore ``` If you want to spin up your `fab.zip` file locally, you can use [**@fab/serve**](./fab-serve). You can either install it globally: ``` yarn global add @fab/serve npm install --global @fab/serve fab-serve fab.zip ``` Or use the awesome [**npx**](https://www.npmjs.com/package/npx) (which is bundled with NodeJS) to run a command-line NPM package without needing to install it: ``` npx @fab/serve fab.zip ``` You should see your app running on `http://localhost:3000`! Note: this process will add one file `fab.zip` and one directory `.fab` into your project. ## Usage `@fab/nextjs` takes the following options: ``` USAGE $ fab-nextjs build OPTIONS -h, --help show CLI help -o, --output=output [default: fab.zip] Output FAB file -s, --server=server Path to server entry file -v, --version show CLI version -w, --working-dir=working-dir [default: .fab] Working FAB directory --intermediate-only EXAMPLE $ fab-nextjs build ``` --- _Source: https://npm.io/package/@fab/nextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._