Go BackFleek.co

How to deploy a Next.js app onto IPFS using Fleek

Next

Overview

We’ll create a Next.js app and deploy it on Fleek. This whole process should take 10 minutes.

Tools:

  • Fleek account
  • GitHub account
  • node.js/npm

Step 1: Set Up a Repo on Github

Create an empty repository and clone it.

CreateRepo

Create a Next.js app using:

$ mkdir nextjs && cd nextjs $ npm init --y' '$ npm install next react react-dom

CreateNextjsapp

Open package.json and add in the following scripts

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"  
}

Openpackagejson

Create a next.config.js file in the root directory

module.exports = {
  exportTrailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
};

createNextConfigJS

Let’s create some pages: Create a folder called pages Inside pages, create index.js

// index.js
import Link from "next/link";

export default function Index() {
  return (
    <div>
      <h1> Index </h1>
      <Link href="/about">
        <a> About </a>
      </Link>
    </div>
  );
}

and about.js

// about.js
export default function About() {
  return (
    <div>
      <h1> About </h1>
    </div>
  );
}

It should look something like this

indexJSAboutJS

To test, run npm run dev and visit localhost:3000

localhost3000

git add, commit, push

gitcommit

Step 2: Set Up Fleek

Sign into https://app.fleek.co/

Sign in with Github

signin

Add New Site

addsite

Connect with Github.

connectGithub

Pick your Next.js repository.

picknextjsrepo

To create a new site:

Build command: npm install && npm run build && npm run export

docker image: fleek/next-js

Publish directory: out

Of course, fleek will autodetect next-js and enter those configurations automatically. :P

It’s worth noting that the docker image fleek/next-js runs the most recent version of node.js by default, which, by the time of this writing, is version 13.

If you need to use another node version, you can do so via the docker tag. EG: For node 10, use fleek/next-js:node-10

Deploy Site

deploySite

Once complete, view your website.

viewSite

You can view the website using the provided domain name.

https://<your-domain>.on.fleek.co

Or verify with the CID.

https://ipfs.io/ipfs/<CID>

verifyCID

Step 3: Updates

Fleek will automatically redeploy your website whenever you make changes to GitHub. Make sure to provide the domain name will remain the same and will point to the new CID. This enables you to build fast modern websites hosted on IPFS.