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
- Node 18+
- Fleek Account
- Fleek CLI
- Fleek Next Adapter
Setup
- 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.
- 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.
- 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
- 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();
}
- 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`
- Now, Create the Fleek Function using the Fleek CLI
//syntax
fleek functions create --name '<name of your function>'
//example
fleek functions create --name fumadocs
- 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.