Merge branch 'develop' into docs/platform-billing

src/components/FrameworkComparisonTable/constants.ts

@@ -4,118 +4,79 @@ export const frameworks: Framework[] = [
   {
     name: 'Next.js',
     ssg: true,
-    ssr: false,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
+    ssr: true,
     previewDeployments: true,
   },
   {
     name: 'SvelteKit',
     ssg: true,
-    ssr: true,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
+    ssr: false,
     previewDeployments: true,
   },
   {
     name: 'Astro',
     ssg: true,
-    ssr: true,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
+    ssr: false,
     previewDeployments: true,
   },
   {
-    name: 'Create React App',
+    name: 'React',
     ssg: true,
-    ssr: false,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
+    ssr: true,
     previewDeployments: true,
   },
   {
     name: 'Vue',
     ssg: true,
     ssr: false,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
     previewDeployments: true,
   },
   {
     name: 'Gatsby',
     ssg: true,
     ssr: false,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
     previewDeployments: true,
   },
   {
     name: 'Nuxt',
     ssg: true,
-    ssr: true,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
+    ssr: false,
     previewDeployments: true,
   },
   {
     name: 'Vite',
     ssg: true,
     ssr: false,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
     previewDeployments: true,
   },
   {
     name: 'Jekyll',
     ssg: true,
     ssr: false,
-    apiRoutes: null,
-    isr: null,
-    fleekFunctions: true,
     previewDeployments: true,
   },
   {
     name: 'Hugo',
     ssg: true,
     ssr: false,
-    apiRoutes: null,
-    isr: null,
-    fleekFunctions: true,
     previewDeployments: true,
   },
   {
     name: 'Gridsome',
     ssg: true,
     ssr: false,
-    apiRoutes: false,
-    isr: false,
-    fleekFunctions: true,
     previewDeployments: true,
   },
   {
     name: 'Svelte + Sapper',
     ssg: true,
-    ssr: true,
-    apiRoutes: true,
-    isr: false,
-    fleekFunctions: true,
+    ssr: false,
     previewDeployments: true,
   },
 ];
 
 export const features: Feature[] = [
   { key: 'ssg', name: 'SSG' },
   { key: 'ssr', name: 'SSR' },
-  { key: 'apiRoutes', name: 'API routes' },
-  { key: 'isr', name: 'ISR' },
-  { key: 'fleekFunctions', name: 'Fleek Functions' },
   { key: 'previewDeployments', name: 'Preview deployments' },
 ];

src/components/FrameworkComparisonTable/types.ts

@@ -4,9 +4,6 @@ export interface Framework {
   name: string;
   ssg: FeatureSupport;
   ssr: FeatureSupport;
-  apiRoutes: FeatureSupport;
-  isr: FeatureSupport;
-  fleekFunctions: FeatureSupport;
   previewDeployments: FeatureSupport;
 }
 

src/content/docs/CLI/Applications/index.md

@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 10
 title: Applications
 date: 2023-01-10
 desc: Learn to manage the Applications

src/content/docs/CLI/Domains/index.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title: Domains
 date: 2023-01-10
 desc: Set up a custom domain for your Fleek site easily with our CLI guide. Add, verify, and manage effortlessly.

src/content/docs/CLI/Edge SGX/index.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 title: Edge SGX
 date: 2024-09-11
 desc: Get started with using the SGX service integrated into Fleek Network from the CLI and unlock a new level of security features

src/content/docs/CLI/Fleek-Next-Adapter/index.md

@@ -0,0 +1,124 @@
+---
+order: 3
+title: Fleek Next Adapter
+date: 2023-01-10
+desc: An overview of the Fleek Next Adapter, a tool that simplifies the deployment of Next.js applications to Fleek.
+---
+
+# Fleek Next adapter
+
+:::info
+Install the [Fleek CLI](/docs) and [login](/docs/cli/#login) locally on your machine to be able to deploy your application.
+:::
+
+The Fleek Next.js adapter enables seamless deployment of server-side Next.js applications on Fleek, allowing users to host fullstack Next.js apps straight from the terminal with optimized performance and edge compatibility. With this adapter, you can deploy your Next.js app as a [Fleek Function](/docs/cli/functions), leveraging the edge runtime of the [Fleek Network](/docs/infrastructure/) to power your application efficiently.
+
+We are going to walk you through the adapter, features it offers, and how to deploy your Next.js app with it on Fleek. This adapter supports both JavaScript and TypeScript Next applications.
+
+You need to make sure that your **Node.js version is at least 18, check that your [Fleek CLI version](/docs/cli/#install) is at least version 3 and that you have a working Next.js application setup**.
+
+## Install
+
+:::note
+You can use pnpm as well for installation.
+:::
+
+To install the CLI open your terminal and run the command below:
+
+```sh
+# Using npm
+npm install @fleek-platform/next
+
+# Global installation
+npm install @fleek-platform/next -g
+```
+
+## CLI usage
+
+To prepare your Next.js application for deployment on Fleek, follow these steps:
+
+1.  **Configure edge runtime**:
+    For routes with server-side code, add the following code to ensure they are configured to be optimised for edge runtimes:
+
+    ```js
+    export const runtime = 'edge';
+    ```
+
+2.  **Build the application**: Use the Fleek Next.js adapter to build and deploy your app from the command line
+
+    ```sh
+    npx fleek-next build
+
+    # or if installed globally
+    fleek-next build
+    ```
+
+3.  If running this command outside of your project’s root directory, specify the path with the `-p` or `--projectPath` flag:
+
+    ```sh
+     fleek-next build -p path/to/my/repo
+    ```
+
+### Build command options:
+
+- **-p, --project-path <path>**: Path to your Next.js project’s root directory. Defaults to the current directory.
+- **-s, --skipBuild**: Skips the build step, allowing you to build the application separately if needed. Default is false.
+- **-i, --skipInstallation**: Skips dependency installation. Default is false.
+- **-c, --clean**: Clears any previous build artifacts before building.
+- **-v, --verbose**: Enables detailed logging.
+
+## Deploying your Next.js application
+
+:::info
+To learn about support for Next.js features on Fleek, see the [documentation](/docs/platform/frameworks#nextjs-on-fleek)
+:::
+
+1. Before you can deploy your Next.js application you will first need to create a Fleek function with the below command:
+
+   ```bash
+   fleek functions create
+   ```
+
+2. You then note the name of the Fleek Function you just created because you will use it in the next step. Deploying your Next.js application after all the above steps is as simple as one command:
+
+   ```sh
+   fleek functions deploy --bundle=false --path .fleek/dist/index.js --assets .fleek/static
+   ```
+
+The above command will prompt you to [login to your Fleek account](/docs/cli/#login) from your CLI if you are not already logged in.
+
+If you are logged in, you will :
+
+1. Be prompted to choose a project on your Fleek account to deploy your application from:
+
+   ```bash
+   ✔ Select a project from the list: › First Project
+
+   ✅ Success! You have switched to project "First Project".
+   ```
+
+2. Choose a Fleek Function to deploy your application to which should match the one you created above:
+
+   ```bash
+   ✔ Select function from the list › stuff
+   ✅ Success! Assets uploaded successfully
+   ```
+
+The below is what you should expect to see while deploying:
+
+:::note
+The URLs below are for a demo Next.js deployment. You will get your own Fleek URL.
+:::
+
+```bash
+Transforming code: [████████████████████████████████████████] 100% | ETA: 0s | 100/100
+
+Uploading code to IPFS: [████████████████████████████████████████] 100% | ETA: 0s | 1105317/1105317
+
+✅ Success! The deployment has been successfully created.
+
+> You can call this Fleek Function by making a request to the following URL
+🔗 https://brief-disease-harsh.functions.on-fleek.app
+> You can also call this Fleek Network URL directly for increased performance (please keep in mind you will not be able to deactivate this link)
+🔗 https://fleek-test.network/services/1/ipfs/bafybeig3v4ffebr3hnukpfl5mutflxqgqaizn4l4vp2ffkfnvjuhmynj4i
+```

src/content/docs/CLI/Functions/index.md

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 title: Fleek Functions
 date: 2024-05-23
 desc: The Fleek Functions are code snippets that are executed server-side using Fleek Network's on-chain cloud infrastructure.

src/content/docs/CLI/Gateways/index.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title: Gateway
 date: 2023-01-10
 desc: Learn how to set up and configure a private gateway on Fleek, serving content from your storage via a custom domain.

src/content/docs/CLI/GitHub Actions/index.md

@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 11
 title: GitHub Actions
 date: 2023-01-10
 desc: Create a GitHub Action for deploying a Fleek Site

src/content/docs/CLI/PAT/index.md

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 title: Personal Access Token
 date: 2023-01-10
 desc: Learn to manage Personal Access Tokens

src/content/docs/CLI/Storage/index.md

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title: Storage
 date: 2023-01-10
 desc: Dive into Fleek's decentralized storage service. Offering support for IPFS, Arweave, and Filecoin, Fleek ensures high availability and performance..

src/content/docs/Platform/Frameworks/index.mdx

@@ -19,7 +19,36 @@ Fleek supports a variety of frameworks and libraries for building sites and appl
 
 ### Frameworks supported by Fleek
 
-You can check out the [templates](/templates) to see frameworks we have support for. Below you see a table that shows infrastructure support for some of the most popular frameworks:
+You can check out the [templates](/templates) to see frameworks we have support for. Fleek supports a wide range of frameworks.
+
+### Next.js on Fleek
+
+Next.js is a fullstack React framework for the web designed to build feature-rich and scalable, modern frontend applications with ease. Fleek supports Next.js and offers a wide variety of features that make it easy to deploy all your Next.js applications.
+
+#### Getting started
+
+Deploying a Next.js project on Fleek is simple:
+
+1. Get the [`fleek-next`](/docs/cli/fleek-next-adapter) adapter
+2. Configure the edge runtime Fleek offers to handle server-side code
+3. Build for production
+4. Deploy to Fleek, get your URL and view your site
+
+#### Features of Next.js on Fleek
+
+:::info
+Incremental Static Regeneration (ISR), Partial Prerendering and Streaming support are being worked on and will be available soon.
+:::
+
+- **Server-Side Rendering (SSR)**: Fleek enables SSR with edge runtimes, letting you render pages dynamically for use cases like authentication and location-based content. SSR scales automatically.
+- **Middleware**: Fleek's Edge Middleware allows custom routing and personalization, making static content adaptable to user preferences or locations.
+- **Service integrations**: Fleek supports integrations with popular services like MongoDB, Sanity, and more, streamlining environment setup and configuration. We offer [Edge SGX](/docs/cli/edge-sgx) for data security and privacy that can be paired with these external services.
+
+We shipped [templates](https://app.fleek.xyz/templates) to get you started with building your Next.js apps on Fleek. You can also learn how about the Fleek Next.js adapter we built and how to deploy your fullstack Next.js apps with it [here](/docs/cli/fleek-next-cli).
+
+### Infrastructure compatibility for popular frameworks on Fleek
+
+Below you see a table that shows infrastructure support for some of the most popular frameworks:
 
 <FrameworkComparisonTable />
 

src/content/docs/index.mdx

@@ -25,6 +25,31 @@ Below are a few resources to help you get started with Fleek. Whether you're new
 
 <div className="my-12 bg-gray-dark-6 p-[1px]" />
 
+## Deploy Next.js on Fleek
+
+Effortlessly deploy your fullstack or static Next.js applications on Fleek. Our dedicated Next.js adapter simplifies the deployment process, enabling you to run your Next.js app at the edge with ease.
+
+<div className="justify-left mb-32 mt-12 flex flex-col gap-16 sm:flex-row">
+
+  <Button
+    variant="secondary"
+    href="/docs/platform/frameworks#nextjs-on-fleek"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Learn more
+  </Button>
+  <Button
+    variant="secondary"
+    href="/docs/cli/fleek-next-cli"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Get the Fleek Next.js adapter
+  </Button>
+</div>
+
+<div className="my-12 bg-gray-dark-6 p-[1px]" />
 ## Host an app
 
 Learn how to host a React app and a Fleek template app in Astro on Fleek using the Fleek platform app. You will need to have an account on the [Fleek app](https://app.fleek.xyz) to follow the steps below.