Ionic + Next.js with SSR & API Routes

Hi all,

we’re currently building a responsive web app with next.js. That web app should get its own native apps for iOS & Android to distribute it in the apple/google app stores.

I’m looking into Ionic for this but I’m not sure if it will work with our next.js setup. I mainly see two potential problems here and would appreciate any ideas/opinions on these:

1.) SSR/SSG
Currently, we’re using next.js mostly with static generated (SSG) pages, but we also have some server side rendered (SSR) pages. I can imagine that SSR might be a problem for ionic since we won’t have a connected server?
It would be possible for us to switch to an SSG-only approach if that’s required for Ionic - but we’d like to prefer using SSR if possible.

2.) API Routes
We’re using next.js’s new API routes (API Routes: Introduction | Next.js) to connect our app to a headless CMS & Auth0 for authentification using serverless functions. I could imagine that this might be a problem? Would we need to change our next.js API routes to a regular node.js server in order to make our server calls work with Ionic?

Would be awesome if someone who’s into this or anybody who has an idea could answer one or both of my questions. Thank you very much!

5 Likes

+1
It will be perfect if it can work with SSR of NextJS!

1 Like

+1 here as well.

Currently building a web app using Next.js and Ionic components, with a plan down the line to move it to mobile as well. Currently using SSR for the pages I’ve built so far and would love to be able to create a hybrid solution that can SSR for web and still be able to run in mobile using the same repo. Wondering if you’ve had any progress in getting Next.js to work with your mobile app?

I recall reading in the Next.js/Ionic starter repo that was put out around this time last year that greater Next.js integration is something the Ionic team is looking at addressing in a future update.

+1 for this as well.

+1 this is one of the only reservations we have for us to commit to using Ionic. Given how critical SSR is to SEO, this is basically a deal-breaker, and it would set Ionic apart very much from Flutter which is notoriously poor at SEO primarily due to its inability to server-side-render

Chipping in from SvelteKit here - I believe as with Next.js, you can enable ssr for specific routes right?

So if that is the case, and in your case you can do without Ionic on your home-page, you can actually enable SSR for the root-route. And then the web app then has ssr=false on a sub route?

Then you get a blazingly fast and SEO enabled home route. And the Ionic web app under a subroute runs as SPA without problems.

Then at main route, I also if the app runs as a PWA, and if so, I do not show the homepage, but navigate to the SPA route.

If you also enable service worker on home route, the caching starts early and the SPA loads really fast.

Would that work?

Im using next js for front end, i need to add database. can i try ionic for this. 5000 steps to km

Currently im using wix for this three website, but its taking so much time to render cause its angular based application. suggest me to get a backup from wix. mobile security services, Direct Hire Staffing Solutions | iBovi Staffing , 7 Best Recruiting Email Templates for a Great Candidate Experience in 2024 (splitle.com)

Online Calculator | CalcGenie
Kb to Gb Converter | Kb to Gb (calcgenie.com)
Convert Inches to Cm | Inch to Cm (calcgenie.com)
Convert Yards to Feet | Yards to Feet (calcgenie.com)