✨ newIntroducing Fleek Machines (Early access): One-click verified and private compute
Oct 31, 2024

Deploying Fumadocs with Fullstack Next.js on Fleek: A Step-by-Step Guide

Deploying Fumadocs with Fullstack Next.js on Fleek: A Step-by-Step Guide

Building towards robust and fullstack developer tooling, we are excited to present Fullstack Next.js deployments on Fleek. Today we will be diving deep into Fumadocs and exploring how we can deploy Fumadocs on Fleek to help you quickly build an extremely performant documentation website.

Fullstack Next.js with Fleek Next Adapter#

The Fleek Next.js adapter enables seamless deployment of your server-side Next.js applications on Fleek. Built on Fleek Functions and powered by the Fleek Network, this adapter extends network capabilities to support full-stack Next.js apps on an unstoppable, edge-optimized infrastructure.

The Fleek Next Adapter opens doors to much more than standard Next.js deployments. We invite developers to experiment, build, and create powerful applications that address real-world challengesβ€”while Fleek provides a high-performance, cost-effective, and open-source platform for your app’s infrastructure.

Prerequisites#

Setup#

  1. Start by installing the Fleek CLI.
// local installation
npm i @fleek-platform/cli

// global installation
npm i -g @fleek-platform/cli

πŸ’‘: you can check the Fleek CLI version by running fleek -v. Any version >= 2.10.1 should be good.

  1. Install the Fleek Next Adapter
// local installation
npm i @fleek-platform/next

// global installation
npm i -g @fleek-platform/next

πŸ’‘: you can check the Fleek Next Adapter version by running fleek-next -v. Any version >= 2.1.0 should be good.

  1. Install fumadocs using the automatic installation flow. Follow the terminal prompts and finish the installation.
npm create fumadocs-app

The installation flow should look something like this -

β”Œ  Create Fumadocs App
β”‚
β—‡  Project name
β”‚  my-app
β”‚
β—‡  Choose a content source
β”‚  Fumadocs MDX
β”‚
β—‡  Use Tailwind CSS for styling?
β”‚  Yes
β”‚
β—‡  Do you want to install packages automatically? (detected as npm)
β”‚  Yes
β”‚
β”‚
●  Configured Typescript
β”‚
●  Configured Tailwind CSS
β—’  Generating Projectβ”‚
●  Installed dependencies
β”‚
●  Initialized Git repository
β—‡  Project Generated
β”‚
β””  Done


Open the project
cd my-app

Run Development Server
npm run dev | pnpm run dev | yarn dev

You can now open the project and start writing documents
kanishkkhurana@Kanishks-Air fuma %

When run locally, the project will look something like this -

And, the /docs page will look like this -

Using the Fleek Next Adapter#

  1. Add the following code to any routes that run server-side code to ensure they run on the edge.
export const runtime = 'edge'

In our case, we will be adding the above code to the following files -

  • /api/search/route.ts
  • /docs/[[…slug]]/page.tsx

Please ensure that you remove the following code from /docs/[[slug]]/page.tsx

// to be commented or removed from /docs/[[slug]]
export async function generateStaticParams() {
  return source.generateParams();
}
  1. Build the project using the Fleek Next Adapter
npx fleek-next build
# or if installed globally
fleek-next build

πŸ’‘: If you are running the command outside of your project’s root dir, you can set the path to it with the project path flag -p/--projectPath:

fleek-next build -p path/to/my/repo

The build flow should look something like this -

 > Building Next.js App
⚑️ @fleek-platform/next-on-fleek CLI v.1.15.0
⚑️ Detected Package Manager: npm (9.8.1)
⚑️ Preparing project...
⚑️ Project is ready
⚑️ Building project...
β–²  Vercel CLI 37.13.0
β–²  Installing dependencies...
β–²  > my-app@0.0.0 postinstall
β–²  > fumadocs-mdx
β–²  [MDX] types generated
β–²  up to date in 607ms
β–²  158 packages are looking for funding
β–²  run `npm fund` for details
β–²  Detected Next.js version: 15.0.0
β–²  Running "npm run build"
β–²  > my-app@0.0.0 build
β–²  > next build
β–²  β–² Next.js 15.0.0
β–²  - Experiments (use with caution):
β–²    Β· turbo
β–²  Creating an optimized production build ...
β–²  [MDX] initialized map file
β–²  βœ“ Compiled successfully
β–²  Linting and checking validity of types ...
β–²  Collecting page data ...
β–²  ⚠ Using edge runtime on a page currently disables static generation for that page
β–²  Generating static pages (0/4) ...
β–²  Generating static pages (1/4)
β–²  Generating static pages (2/4)
β–²  Generating static pages (3/4)
β–²  βœ“ Generating static pages (4/4)
β–²  Finalizing page optimization ...
β–²  Collecting build traces ...
β–²
β–²  Route (app)                              Size     First Load JS
β–²  β”Œ β—‹ /                                    172 B           108 kB
β–²  β”œ β—‹ /_not-found                          899 B           100 kB
β–²  β”œ Ζ’ /api/search                          136 B          99.4 kB
β–²  β”” Ζ’ /docs/[[...slug]]                    11.3 kB         157 kB
β–²  + First Load JS shared by all            99.3 kB
β–²  β”œ chunks/215-a4345262cfe926b0.js       44.6 kB
β–²  β”œ chunks/4bd1b696-f30c9099448122a7.js  52.6 kB
β–²  β”” other shared chunks (total)          2.07 kB
β–²  β—‹  (Static)   prerendered as static content
β–²  Ζ’  (Dynamic)  server-rendered on demand
β–²  Traced Next.js server files in: 187.249ms
β–²  Created all serverless functions in: 43.749ms
β–²  Collected static files (public/, static/, .next/static): 2.296ms
β–²  Build Completed in .vercel/output [18s]
⚑️ Completed `npx vercel build`.

⚑️ Build Summary (@fleek-platform/next-on-fleek v1.15.0)
⚑️
⚑️ Edge Function Routes (2)
⚑️   β”Œ /api/search
⚑️   β”” /docs/[[...slug]]
⚑️
⚑️ Prerendered Routes (2)
⚑️   β”Œ /
⚑️   β”” /index.rsc
⚑️
⚑️ Other Static Assets (43)
⚑️   β”Œ /_app.rsc.json
⚑️   β”œ /_document.rsc.json
⚑️   β”œ /_error.rsc.json
⚑️   β”œ /404.html
⚑️   β”” ... 39 more

⚑️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
⚑️ Generated '.vercel/output/static/_worker.js/index.js'.
⚑️ Build completed in 0.46s
βœ… Success! Next.js app successfully built
βœ… Success! Next.js app successfully bundled
βœ… Success! Copied static assets successfully
🏁 Ready! Your Next.js app has been successfully built

πŸ€– Deploy your app by running the following command:
 β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
 β”‚ fleek functions deploy --bundle=false --path .fleek/dist/index.js --assets .fleek/static  β”‚
 β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
πŸ’‘ Make sure to create a function first using `fleek functions create`
  1. Now, Create the Fleek Function using the Fleek CLI
//syntax
fleek functions create --name '<name of your function>'

//example
fleek functions create --name fumadocs
  1. Finally, deploy using the Fleek CLI
//syntax
fleek functions deploy --bundle=false --path .fleek/dist/index.js --assets .fleek/static --name '<name of your function>'

//example
fleek functions deploy --bundle=false --path .fleek/dist/index.js --assets .fleek/static --name fumadocs

As you complete all the steps successfully here, you will be able to access your fullstack Next.js app using a link that looks like this- https://hundreds-action-shrilling.functions.on-fleek.app

Congratulations! With this you have completed the tutorial and successfully deployed a fumadocs template on Fleek as a fullstack Next.js app. You can now expand your learning to build interesting use cases on Next.js and execute them as a Fleek Functions for scalable and performant execution and ensure that your apps exist perpetually.

To learn more about the benefits of building fullstack Next.js apps with Fleek, click here.