# Nextjs-ic-starter - Simple IC Starter dApp with Next.js frontend and Motoko **URL:** \ **Category:** Developers\ **Created:** [June 29, 2021, 2:04am UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560 "2021-06-29T02:04:48Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [June 29, 2021, 2:04am UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/1 "2021-06-29T02:04:48Z")
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](https://github.com/dappblock/nextjs-ic-starter) template open source. > **[dappblock/nextjs-ic-starter](https://github.com/dappblock/nextjs-ic-starter)** > > Next.js Internet Computer Starter Template. Contribute to dappblock/nextjs-ic-starter development by creating an account on GitHub. 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/). [https://u4gun-5aaaa-aaaah-qabma-cai.raw.ic0.app/](https://u4gun-5aaaa-aaaah-qabma-cai.raw.ic0.app/) I have written a [quick start guide](https://github.com/dappblock/nextjs-ic-starter/blob/master/README.md) 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](http://localhost:3000) for development with hot code deploy or deploy to local DFX server running in [http://localhost:8000](http://localhost:8000) . More details can be found in the [READM.md](https://github.com/dappblock/nextjs-ic-starter/blob/master/README.md) . Have fun. ---
**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\ **Post date:** [October 23, 2021, 2:37pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/2 "2021-10-23T14:37:17Z")
hello, did you try multipage navigation? I used nextjs Link, it doesn’t work (400 error) ---
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [October 23, 2021, 11:23pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/3 "2021-10-23T23:23:03Z")
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: ```auto Profile ``` 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. ```auto Profile ``` 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](https://nextjs.org/docs/api-reference/next/link) 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. > **[Content Fly - Acquire content that makes you fly](https://grwwk-gaaaa-aaaah-aapma-cai.raw.ic0.app/)** > > Content Marketplace connecting high quality Creators with Brands, running on Dfinity Internet Computer 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](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/e/ee3105b39c72f946a3e3d2138ef2c22792e90441.jpeg) ---
**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\ **Post date:** [November 1, 2021, 3:07am UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/4 "2021-11-01T03:07:03Z")
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](https://nextjs.org/docs/messages/prerender-error) > Error: Error for page /todos/[id]: pages with `getServerSideProps` can not be exported. See more info here: [`getServerSideProps` Export Error | Next.js](https://nextjs.org/docs/messages/gssp-export) ---
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [November 1, 2021, 10:47pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/5 "2021-11-01T22:47:02Z")
Hi, getServerSideProps requires NodeJS server therefore it is not supported in export static HTML. More details here [Advanced Features: Static HTML Export | Next.js](https://nextjs.org/docs/advanced-features/static-html-export) 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. ---
**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\ **Post date:** [November 4, 2021, 3:12pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/6 "2021-11-04T15:12:27Z")
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](http://www.abc.com/posts/234)) to someone, then they can just click the link (e.g [www.abc.com/posts/234](http://www.abc.com/posts/234)) to open the specific post (234) directly without go through from a list. ---
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [November 4, 2021, 11:41pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/7 "2021-11-04T23:41:16Z")
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](http://www.abc.com/posts.html?id=234) ```auto const router = useRouter() useEffect(() => { async function loadPost() { if (router.query.id != null) { // Load post content from Canister actor } } loadPost() }, [router.query.id]) ``` ---
**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\ **Post date:** [November 7, 2021, 2:30pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/8 "2021-11-07T14:30:36Z")
> [@kinwo](#): > > with NextJS router quer yeah, looks like this is the only way I can do, thank you!! ---
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [January 20, 2022, 5:06am UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/9 "2022-01-20T05:06:04Z")
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. 🙂 > **[Beginner’s Guide for building Web3 Dapp with NextJS and Internet Computer](https://medium.com/@kinwo/beginners-guide-for-building-web3-dapp-with-nextjs-and-internet-computer-596b8a6d59f6)** > > Introduction > The purpose of this article is to give beginners a quick walkthrough of what Web3 Dapp could look like beyond a simple hello… ---
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [April 17, 2023, 12:15am UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/10 "2023-04-17T00:15:39Z")
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](https://github.com/dappblock/nextjs-ic-starter/releases) ---
**Author:** ![kinwo](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/kinwo/32/2315_2.png) [@kinwo](https://forum.dfinity.org/u/kinwo)\ **Post date:** [September 20, 2023, 10:17pm UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/11 "2023-09-20T22:17:40Z")
A new release v0.5.0 is now available for nextjs.ic-starter supporting the latest dfx 0.15.0. > **[Release v0.5.0 · dappblock/nextjs-ic-starter](https://github.com/dappblock/nextjs-ic-starter/releases/tag/0.5.0)** > > 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 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 : ) ---
**Author:** ![iamenochchirima](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/iamenochchirima/32/21673_2.png) [@iamenochchirima](https://forum.dfinity.org/u/iamenochchirima)\ **Post date:** [January 4, 2024, 7:09am UTC](https://forum.dfinity.org/t/nextjs-ic-starter-simple-ic-starter-dapp-with-next-js-frontend-and-motoko/5560/12 "2024-01-04T07:09:08Z")
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.