{"id":13454801,"url":"https://github.com/fastly/next-compute-js","last_synced_at":"2025-12-30T00:56:26.565Z","repository":{"id":60968355,"uuid":"516331746","full_name":"fastly/next-compute-js","owner":"fastly","description":"Run Next.js on Fastly Compute","archived":false,"fork":false,"pushed_at":"2024-07-17T20:31:29.000Z","size":857,"stargazers_count":77,"open_issues_count":12,"forks_count":5,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-03-12T03:03:35.395Z","etag":null,"topics":["compute-library","fastly-oss-tier2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fastly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-21T10:49:04.000Z","updated_at":"2025-03-11T13:14:56.000Z","dependencies_parsed_at":"2023-02-08T08:16:00.300Z","dependency_job_id":"5f7807d2-c907-4480-b03c-439b3debda44","html_url":"https://github.com/fastly/next-compute-js","commit_stats":null,"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fastly%2Fnext-compute-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fastly%2Fnext-compute-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fastly%2Fnext-compute-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fastly%2Fnext-compute-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fastly","download_url":"https://codeload.github.com/fastly/next-compute-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245020338,"owners_count":20548179,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compute-library","fastly-oss-tier2"],"created_at":"2024-07-31T08:00:58.047Z","updated_at":"2025-12-30T00:56:26.525Z","avatar_url":"https://github.com/fastly.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Next.js on Fastly Compute\n\nDeploy and serve your [Next.js](https://nextjs.org) website from Fastly's [Compute](https://developer.fastly.com/learning/compute/) platform.\n\n\u003e NOTE: `@fastly/next-compute-js` is provided as a Fastly Labs product. Visit the [Fastly Labs](https://www.fastlylabs.com/) site for terms of use.\n\n## New! Version 2\n\nWith Version 2, `@fastly/next-compute-js` has been rebuilt from the ground up, with the following features:\n\n* Adds support for Next.js 13.\n  * Supported versions are 12.3.0 through 13.4.6. \n    * Note: The [App Router](https://nextjs.org/docs/app) is not yet supported. \n  * New modular design allows us to build support for new versions more easily.\n  * Adds support for React 18's streaming rendering mode.\n* A new server layer that simulates Vercel's Middleware / Cache / Functions architecture.\n  * Adds support for Edge SSR / Edge API Routes by specifying the `edge` runtime.\n  * Adds support for Edge Middleware.\n  * Adds support for Incremental Static Regeneration, with support for On-demand Revalidation and Draft Mode (as well as Preview Mode).\n\n\u003e If you need to use the 0.9.x version of this tool, [click here](https://github.com/fastly/next-compute-js/tree/v0.9.x).\n\n### Upgrading\n\nVersion 2 is more full-featured, is more stable, and works completely differently from the previous version.\nThere is no migration path at the current time. You'll need to re-scaffold your application. When you do this, make sure\nyou may want to keep a note of the fastly.toml file if it configures your service ID.\n\n## Next.js\n\nNext.js is a popular JavaScript-based server framework that gives the developer a great experience –\nthe ability to write in [React](https://reactjs.org) for the frontend, and a convenient and intuitive way to set up some of the best features\nyou need for production: hybrid static \u0026 server rendering, smart bundling, route prefetching, and more, with very little\nconfiguration needed.\n\n## This library\n\nThis library works by packaging the build artifacts from your Next.js site into a scaffolded Compute application\nthat simulates the Vercel runtime environment, mainly using these libraries:\n\n* [`@fastly/serve-vercel-build-output`](https://github.com/fastly/serve-vercel-build-output) - A server implementation\n  for Compute that simulates Vercel's Middleware / Cache / Functions infrastructure. It uses Fastly KV Store for\n  caching.\n* [`@fastly/next-compute-js-server-x.x.x`](https://github.com/fastly/next-compute-js-server) - A custom implementation of\n  the `NextServer` class provided by Next.js designed to work on Compute. Note that the `x.x.x` part of the name of\n  the library you use lines up with the specific version of Next.js used by your project (See [details](#next-compute-js-server)).\n* [`@fastly/compute-js-static-publish`](https://github.com/fastly/compute-js-static-publish) - A library that provides runtime\n  access to the build artifacts packaged in the Compute application.\n\n## Usage\n\nPrerequisites:\n\n* [Fastly CLI](https://developer.fastly.com/learning/tools/cli/), version \u003e= 9.0.0\n* [Node.js](https://nodejs.org/) \u003e= 16\n* [Next.js](https://nextjs.org/) 12.3.0 through 13.4.6\n\nFollow these steps:\n\n* [Develop your site](#develop-your-site)\n* [Create your Compute project](#create-compute-js)\n* [Set up Compute Next.js Server Runtime library](#next-compute-js-server)\n* [Configuration](#configuration)\n* [Test the project locally](#testing-locally)\n* [Deploy the project to your Fastly service](#deploy-to-fastly)\n\n### Develop your site\n\nUse [create-next-app](https://nextjs.org/docs) (or [any alternative method](https://nextjs.org/docs/getting-started/installation#manual-installation))\nto set up your Next.js app.\n\n\u003e NOTE: Currently supported versions of Next.js are 12.3.0 through 13.4.6.\n\n\u003e NOTE: The current version does not support Next.js 13's [App Router](https://nextjs.org/docs/app).\n\u003e When `create-next-app` prompts you whether to use App Router, you must decline.\n\n\u003e HINT: We have some examples that showcase some of the features that we support, available at https://github.com/fastly/nextjs-examples.\n\u003e Feel free to check out the code and try them out on your local environment or your Fastly Service.\n\nDirectory Structure:\n```\nmy-next-app/                 - Project root\n  package.json               - Project manifest file\n  next.config.js             - Next.js config file\n  src/                       - Project source files\n    pages/                   - Pages routed files\n      api/\n        *.js                 - API route handlers\n      *.js                   - React source files\n    styles/\n      *.css                  - CSS files\n      *.module.css           - CSS modules  \n  public/\n    *                        - Public files\n  .gitignore\n  ...other files\n```\n\nBuild your site normally as you would in Next.js, and use its built-in development server during\ndevelopment:\n\n```shell\nnpm run dev\n```\n\n### \u003ca name='create-compute-js'\u003e\u003c/a\u003e Create your Compute project\n\nIn your project directory, type the following command to scaffold a Compute project:\n\n```shell\nnpx @fastly/next-compute-js init\n```\n\nThis will result in a `./next-compute-js` directory, initialized with application files.\n\nDirectory Structure:\n```\nmy-next-app/                 - Project root\n  next-compute-js/           - Scaffolded Compute program\n    src/index.js             - Compute entry point\n    package.json             - Project manifest file\n    server.config.json       - Compute specific config options\n    fastly.toml              - Fastly Compute manifest\n    static-publish.rc.js     - ComputeJS Static Publisher config file\n    webpack.config.js        - Webpack config file\n    .gitignore\n    tsconfig.json\n```\n\nYou should commit this directory to your source control, especially if you intend to make customizations\nto any of the config files.\n\nThe program also updates your project's package.json file, adding the fastly-serve and fastly-deploy scripts.\n\nThe program then automatically moves on to set up the Next.js runtime automatically (next step).\n\n### \u003ca name=\"next-compute-js-server\"\u003e\u003c/a\u003e Set up Compute Next.js Server Runtime library\n\nNext.js is under active development, and receives frequent updates that make changes to its internals. Unfortunately,\nthis causes incompatibilities between our custom implementation and the classes provided by Next.js.\n\nTherefore, Fastly provides a specific runtime library for every supported version of Next.js.\n\u003e For example, if you're using Next.js 13.4.6, the corresponding version is `@fastly/next-compute-js-server-13.4.6`.\n\nFortunately, we've automated the process: this step will automatically install the correct library that matches your Next.js\nversion (this step will happen automatically after scaffolding your application, but you may run it manually\nat a later time if you change the version of Next.js).\n\nFrom inside the Next app's root directory, type the following:\n\n```shell\nnpx @fastly/next-compute-js setup-next-runtime\n```\n\nThe program examines the version of Next.js used by your app, and adds the appropriate runtime library to the\nCompute application, or displays an error message if you are running an unsupported version of Next.js.\n\n### Configuration\n\nIn addition to any configuration that applies to your Next.js application in terms of `next.config.js`, you may need to\nconfigure the following aspects of your Compute application.\n\n#### Backends\n\nA [Fastly backend](https://developer.fastly.com/reference/glossary#term-backend) refers to a label for any external domain\nthat your application needs to perform HTTP calls to at runtime. \n\nThey are used in for two purposes:\n\n1. If any of the server-side code (for example, `getServerSideProps` and some uses of `getStaticProps`) needs to perform\nany fetch operations to an external backend, you must apply the backend to the initialization code for the fetch:\n\n```javascript\nasync function getStaticProps({ params  }) {\n    const res = await fetch(\"https://http-me.glitch.me/anything\", {\n        backend: \"http-me\" // This is the backend name\n    });\n    const body = await res.text();\n    return {\n        props: {\n            body\n        }\n    };\n}\n```\n\n2. If any of the rewrites defined in your Next.js config would proxy to an external server, then specify the backend for\neach domain by adding them to `server.config.js`. This enables the proxying by looking up the backend name `'http-me'`\nbased on the URL during a proxy.\n\n```javascript\n/** @type {import('@fastly/serve-vercel-build-output').ServerConfig} */\nconst config = {\n  backends: {\n    'http-me': { url: 'https://http-me.glitch.me/' },\n  },\n};\n```\n\nTo use the backend in the development environment, add the\n[Backend definition](https://developer.fastly.com/reference/compute/fastly-toml/#backends) to your `fastly.toml` file.\n\nTo use the backend in your Fastly service, add the Backend in the Fastly application at https://manage.fastly.com/.\n\n#### KV Store for caching\n\nThe server simulates Vercel's cache infrastructure by caching responses in Fastly KV Store. For the local development\nenvironment, the application always uses the KV Store named \"local-kvcache\", and no further configuration is necessary.\n\nTo use a KV Store in your Fastly service, you'll need to create one and link it to your service, following the steps described in\n[the Developer Hub on this page](https://developer.fastly.com/learning/concepts/data-stores/#kv-stores).\n\nFor example, use the following commands to add a KV Store and link it to your service.\n\n```shell\n# Create a KV store\n% curl -i -X POST \"https://api.fastly.com/resources/stores/kv\" \\\n-H \"Fastly-Key: YOUR_FASTLY_TOKEN\" \\\n-H \"Content-Type: application/json\" \\\n-H \"Accept: application/json\" \\\n-d '{\"name\": \"example-store\"}'\n\n# You'll get back an ID for your KV Store.\n\n# Link the store to a service\n% curl -i -X POST \"https://api.fastly.com/service/YOUR_FASTLY_SERVICE_ID/version/YOUR_FASTLY_SERVICE_VERSION/resource\" \\\n-H \"Fastly-Key: YOUR_FASTLY_TOKEN\" \\\n-H \"Content-Type: application/x-www-form-urlencoded\" \\\n-H \"Accept: application/json\" \\\n-d \"name=your-app-kv-store\u0026resource_id=YOUR_KV_STORE_ID\"\n```\n\nThen, use the `server.config.js` to configure the application with the KV Store. Specify the name of the resource link.\n\n```javascript\n/** @type {import('@fastly/serve-vercel-build-output').ServerConfig} */\nconst config = {\n  cachingKvStore: 'your-app-kv-store',\n};\n```\n\n### \u003ca name=\"running-locally\"\u003e\u003c/a\u003e Test the project locally\n\nYou can run your Compute application in\n[Fastly's local development environment](https://developer.fastly.com/learning/compute/testing/#running-a-local-testing-server).\n\nAfter initializing your project and setting up the runtime, from inside the Next app's root directory, type the following:\n\n```shell\nnpm run fastly-serve\n```\n\nThe process will build your Next.js project, then switch to the `next-compute-js` directory, build and package the\nCompute application to Wasm, and then start the Fastly development environment.\n\nIt will be possible to browse to your local site by accessing http://localhost:7676/.\n\nRemember that each time you make changes to your source files, you will need to stop the server and re-run this process\nto build a new Wasm binary to run in the Development environment.\n\nFor details on how building the project works, see [How it works](#how-it-works) below.\n\n### \u003ca name=\"deploy-to-fastly\"\u003e\u003c/a\u003e Deploy the project to your Fastly service\n\nWhen you're ready to deploy your site to Compute, from inside the Next app's root directory, type the following:\n\n```shell\nnpm run fastly-deploy\n```\n\nThe process will build your Next.js project, then switch to the `next-compute-js` directory, build and package the Compute\napplication to Wasm, and then [start the deployment process to your Fastly service](https://developer.fastly.com/learning/compute/#deploy-the-project-to-a-new-fastly-service).\n\nIf you haven't already created a service for your application, you will be prompted for your service's\ndetails. Alternatively, you can [populate `fastly.toml` yourself](https://developer.fastly.com/reference/compute/fastly-toml/)\nto specify an existing service.\n\nFor details on how building the project works, see [How it works](#how-it-works) below.\n\n#### Configuring the application\n\nIf the Server-Side parts of your application need any access to backends while running on the local development server,\n[define them](https://developer.fastly.com/reference/compute/fastly-toml/) in the `fastly.toml` file.\n\n\n## Configuring the Compute application\n\nBeing a Compute application, the generated project contains a\n[`fastly.toml`](https://developer.fastly.com/reference/compute/fastly-toml) file.\nBefore publishing your project, you may want to update the various fields to specify\nyour project name, the author name, and the service ID.\n\nAdditionally, if the Server-Side parts of your application need any access to backends\nwhile running on the local development server, define them here.\n\n## Supported Next.js Features\n\nThe following Next.js features are supported:\n\n* Static File Routing\n* Static Routed Pages - index routes, nested routes\n* Dynamic Routed Pages - dynamic route segments, catch-all, optional catch-all\n* `\u003cLink\u003e` object\n* Router object / Imperative Routing / Shallow Routing\n* Static Generation without Data\n* Server-Side Generation with Static Props / Static Paths\n* Server-Side Rendering with Server-Side Props\n* Client-Side fetching\n* SWR\n* Built-in CSS / CSS Modules\n* Compression (gzip)\n* ETag generation\n* Rewrites\n* Redirects\n* Internationalized Routing\n* Layouts\n* Font Optimization\n* `\u003cImage\u003e` tags\n* Headers\n* MDX\n* Custom App\n* Custom Document\n* Custom Error Page\n* Preview Mode\n* API Routes\n* Edge API Routes / Edge Middleware\n* Incremental Static Regeneration\n\nThe following are not supported at the current time:\n\n* App Router\n* Dynamic Import\n* Image Optimization (Image tags are supported, but the images are not optimized)\n\n### API Routes\n\nWe support [API Routes](https://nextjs.org/docs/api-routes/introduction). The handlers in your application\nwill receive Node.js-style request and response objects that have Next.js [Request](https://nextjs.org/docs/api-routes/request-helpers)\nand [Response](https://nextjs.org/docs/api-routes/response-helpers) helpers applied to them.\n\n### Edge SSR Rendering / Edge API Routes / Edge Middleware\n\nWe support [Edge SSR rendering](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime).\n\nWe support [Edge API Routes](https://nextjs.org/docs/api-routes/edge-api-routes) and\n[Middleware](https://nextjs.org/docs/advanced-features/middleware) as well.\n\n### MDX\n\nIt's possible to use MDX by following the directions on this page on the Next.js\nwebsite: [Using MDX with Next.js](https://nextjs.org/docs/advanced-features/using-mdx).\n\n## Issues\n\nIf you encounter any non-security-related bug or unexpected behavior, please [file an issue][bug]\nusing the bug report template.\n\n[bug]: https://github.com/fastly/next-compute-js/issues/new?labels=bug\n\n### Security issues\n\nPlease see our [SECURITY.md](./SECURITY.md) for guidance on reporting security-related issues.\n\n## License\n\n[MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffastly%2Fnext-compute-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffastly%2Fnext-compute-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffastly%2Fnext-compute-js/lists"}