Nextjs-ic-starter - Simple IC Starter dApp with Next.js frontend and Motoko

Developers
1

I believe some developers may find it easier to start with Next.js with a simple Motoko canister backend. So here it is. I have made the nextjs-ic-starter template open source.

Feel free to run it locally and even deploy it to IC Network.

A working demo is here.

https://u4gun-5aaaa-aaaah-qabma-cai.raw.ic0.app/

I have written a quick start guide which I am sure you can follow and get it running in 10 mins.

You can either use the Next.js dev server in http://localhost:3000 for development with hot code deploy or deploy to local DFX server running in http://localhost:8000 .

More details can be found in the READM.md .

Have fun.

15 Likes
2

hello, did you try multipage navigation? I used nextjs Link, it doesn’t work (400 error)

3

Hi, yes I do. NextJS Link is mainly for client side routing. If you export NextJS as static files and deploy to Internet Computer, it won’t work straight away because server side is all static file serving not NodeJS.

For example:

<Link href="/profile">Profile</Link>

When the user clicks on the link, the routing will happen on the browser client side and it will load but if the user reload the page /profile, it won’t work because the backend asset canister only has /proflle.html .

What I did in my project is to use “as” attribute.

<Link href="/profile" as="/profile.html" >Profile</Link>

In this case the client side routing will work as well as server side when the user reloads the page. What it does is to use /profile.html in browser URL bar instead of /profile.

More details here: next/link | Next.js

If you want to see it all in action, visit my dapp Content Fly. It is still under development.
I am happy for you to try.

You can claim your spot, signup. Once you are in, the sidebar links and profile link at the bottom are NextJS Links.

Hope it helps.

Screen Shot 2021-10-24 at 10.20.37 am
Screen Shot 2021-10-24 at 10.20.37 am652Ă—1824 68 KB

3 Likes
4

hi, I got my nextjs frontend deployed in canister, but when I enable SSR (with getServerSideProps), it doesn’t allow to export as below: do you know how to deal with that?

Error occurred prerendering page “/todos/[id]”. Read more: Prerender Error | Next.js
Error: Error for page /todos/[id]: pages with getServerSideProps can not be exported. See more info here: `getServerSideProps` Export Error | Next.js

5

Hi, getServerSideProps requires NodeJS server therefore it is not supported in export static HTML. More details here Advanced Features: Static HTML Export | Next.js

You can potentially achieve similar thing through getStaticProps which is called when NextJS generates the HTML or simply use React useEffect to load the content in client side.

2 Likes
6

thanks! but it’s problem with dynamic routers. For example, if I have posts/[id].js, after exporting, it will generate /posts/[id].html, When I try to access /posts/234, I will get 404, because no 234.html under posts

my goal is sharing a post link(e.g www.abc.com/posts/234) to someone, then they can just click the link (e.g www.abc.com/posts/234) to open the specific post (234) directly without go through from a list.

7

I see. It’s a bit tricky since NextJS dynamic router is basically server side routing. In that case, you can try simple HTTP query parameters with NextJS router query (which is client side) then load the content from canister via React.useEffect.

E.g http://www.abc.com/posts.html?id=234

const router = useRouter()

useEffect(() => {
    async function loadPost() {

      if (router.query.id != null) {
          // Load post content from Canister actor
      }
    }


    loadPost()

  }, [router.query.id])
2 Likes
8

yeah, looks like this is the only way I can do, thank you!!

9

I have recently updated the Github repo to the latest DFX and added a new example with Image canister. If you are interested in it, I have written a new article. :slightly_smiling_face:

3 Likes
10

Since I received a couple of requests recently in using NextJS 13 with IC, I have updated the NextJS IC starter to use the latest version NextJS 13.3 and DFX to 0.13.1.

More details here:
https://github.com/dappblock/nextjs-ic-starter/releases

5 Likes
11

A new release v0.5.0 is now available for nextjs.ic-starter supporting the latest dfx 0.15.0.

Changes

  • upgrade dfx to 0.15, NextJS to 13.5
  • start using declaration node_compatibiltiy for canister UI declaration generation for better compatibility with NextJS usage
  • update README

: )

5 Likes
12

When using this nextjs implementation is it possible to use optimized images? I am getting errors when I try to export if when unoptimized images is false.