From 3e39437902192e5dca214911f4b9b4e02ae0b2a3 Mon Sep 17 00:00:00 2001 From: Tobiloba Adedeji <96334363+tobySolutions@users.noreply.github.com> Date: Mon, 4 Nov 2024 13:11:41 +0100 Subject: [PATCH] docs: next js docs (#278) ## Why? This PR adds in Next.js docs PR to the repository for the upcoming release. ## How? - Add Next.js frameworks docs to the platform next.js docs - Add the `fleek-next` CLI docs. Screenshot 2024-10-28 at 23 59 28 Screenshot 2024-10-29 at 00 00 25 ## Tickets? - [Update Next.js docs with new features](https://linear.app/fleekxyz/issue/MKTG-66/update-nextjs-docs-with-new-features) ## Contribution checklist? - [x] The commit messages are detailed - [x] The `build` command runs locally - [x] Assets or static content are linked and stored in the project - [x] Document filename is named after the slug - [x] You've reviewed spelling using a grammar checker - [x] For documentation, guides or references, you've tested the commands and steps - [x] You've done enough research before writing ## Security checklist? - [x] Sensitive data has been identified and is being protected properly - [x] Injection has been prevented (parameterized queries, no eval or system calls) - [x] The Components are escaping output (to prevent XSS) --------- Co-authored-by: nlc616 <97002998+nlc616@users.noreply.github.com> Co-authored-by: Gabriel Pinto --- .../FrameworkComparisonTable/constants.ts | 53 +------- .../FrameworkComparisonTable/types.ts | 3 - src/content/docs/CLI/Applications/index.md | 2 +- src/content/docs/CLI/Domains/index.md | 2 +- src/content/docs/CLI/Edge SGX/index.md | 2 +- .../docs/CLI/Fleek-Next-Adapter/index.md | 124 ++++++++++++++++++ src/content/docs/CLI/Functions/index.md | 2 +- src/content/docs/CLI/Gateways/index.md | 2 +- src/content/docs/CLI/GitHub Actions/index.md | 2 +- src/content/docs/CLI/PAT/index.md | 2 +- src/content/docs/CLI/Storage/index.md | 2 +- .../docs/Platform/Frameworks/index.mdx | 31 ++++- src/content/docs/index.mdx | 25 ++++ 13 files changed, 194 insertions(+), 58 deletions(-) create mode 100644 src/content/docs/CLI/Fleek-Next-Adapter/index.md diff --git a/src/components/FrameworkComparisonTable/constants.ts b/src/components/FrameworkComparisonTable/constants.ts index ea032708..86f08667 100644 --- a/src/components/FrameworkComparisonTable/constants.ts +++ b/src/components/FrameworkComparisonTable/constants.ts @@ -4,109 +4,73 @@ 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, }, ]; @@ -114,8 +78,5 @@ export const frameworks: Framework[] = [ 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' }, ]; diff --git a/src/components/FrameworkComparisonTable/types.ts b/src/components/FrameworkComparisonTable/types.ts index a2c2efd7..32f4d5ad 100644 --- a/src/components/FrameworkComparisonTable/types.ts +++ b/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; } diff --git a/src/content/docs/CLI/Applications/index.md b/src/content/docs/CLI/Applications/index.md index df70a3e8..27381bea 100644 --- a/src/content/docs/CLI/Applications/index.md +++ b/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 diff --git a/src/content/docs/CLI/Domains/index.md b/src/content/docs/CLI/Domains/index.md index 2038551b..adea2561 100644 --- a/src/content/docs/CLI/Domains/index.md +++ b/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. diff --git a/src/content/docs/CLI/Edge SGX/index.md b/src/content/docs/CLI/Edge SGX/index.md index 902380da..ea0ca834 100644 --- a/src/content/docs/CLI/Edge SGX/index.md +++ b/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 diff --git a/src/content/docs/CLI/Fleek-Next-Adapter/index.md b/src/content/docs/CLI/Fleek-Next-Adapter/index.md new file mode 100644 index 00000000..6564429f --- /dev/null +++ b/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 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 +``` diff --git a/src/content/docs/CLI/Functions/index.md b/src/content/docs/CLI/Functions/index.md index e78ca4bf..760d6f1e 100644 --- a/src/content/docs/CLI/Functions/index.md +++ b/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. diff --git a/src/content/docs/CLI/Gateways/index.md b/src/content/docs/CLI/Gateways/index.md index 9701c684..cd99ef78 100644 --- a/src/content/docs/CLI/Gateways/index.md +++ b/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. diff --git a/src/content/docs/CLI/GitHub Actions/index.md b/src/content/docs/CLI/GitHub Actions/index.md index 146abf05..294b5e94 100644 --- a/src/content/docs/CLI/GitHub Actions/index.md +++ b/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 diff --git a/src/content/docs/CLI/PAT/index.md b/src/content/docs/CLI/PAT/index.md index c29ad075..89523d04 100644 --- a/src/content/docs/CLI/PAT/index.md +++ b/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 diff --git a/src/content/docs/CLI/Storage/index.md b/src/content/docs/CLI/Storage/index.md index 58306c97..cc70bc41 100644 --- a/src/content/docs/CLI/Storage/index.md +++ b/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.. diff --git a/src/content/docs/Platform/Frameworks/index.mdx b/src/content/docs/Platform/Frameworks/index.mdx index 21181059..57916caf 100644 --- a/src/content/docs/Platform/Frameworks/index.mdx +++ b/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: diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index ac721038..69b49dce 100644 --- a/src/content/docs/index.mdx +++ b/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
+## 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. + +
+ + + +
+ +
## 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.