Found a Next.js Template with Ionic?

Hey there,

I saw this example/template here:

uses ionic/core and not react?

It seems to work great! But I can’t get small things to work right, like ion-menu-toggle and stuff like that.

Is this an “officially” sanctioned template?

I saw this older template:

But it looks abandoned?

Welcome to Ionic

I saw this Vercel release also and did some testing.

Repo: https://github.com/adaept/moonbase-vercel-ionic
Site: https://ae-vercel-ionic.adaept.vercel.app

Check it out on a browser and mobile.

They are using the core with angular type coding
in contrast to the react approach, i.e.

<ion-header>

vs.

<IonHeader>

I am not clear on the details. Hopefully one of the
ionic team can chime in @manucorporat

Having said that, coming from an angular background
I am happy with this approach as I do not need to
do a brain switch.

I have the same question about how it is
to be supported and what is actually going on
with the coding.

They are using @ionic/core and defineCustomElements() - see _app.tsx

Kinda weird

This is just for web though right? similar to react-native-web

This is working for me

@seanaguinaga0 @peterennis @yurinondual

2 Likes

I am surprised there’s no next.config.js in your repository

Kudos

The latest update worked. EmojiEmojiEmoji

1 Like

I like it!

It does not use SSR though - which the Vercel template has.

no, can be deployed to device

that is correct… i am running on device and it is a start… the vercel template doesnt work with Ionic and that is the problem I was trying to solve

1 Like

do you have a link to the project? specifically the package json so I can see what is the difference

I made a local repo to test updating from your
hello world example.
Error: yarn dev => next is not known.

I also noticed the basic example is js and not ts.

You have a .codesandbox folder

Nextjs has a .next folder

If you look at package json you will see the project is not using the official ionic react build, it is a local build from the developer I referenced in the read me of the original project

I did it in Javascript and not typescript to make the example more approachable.

The project will deploy fine with warning on vercel

Details here:

Repo: https://github.com/adaept/moonrock-vercel-ionic

Site: http://moonrock-vercel-ionic-git-master.adaept.vercel.app/

I made a local repo to test updating from your
hello world example.
Error: yarn dev => next is not known.

I also noticed the basic example is js and not ts.

You have a .codesandbox folder

Nextjs has a .next folder

It’s interesting!

Uses ionic/core instead of react

@aaronksaunders I cannot work out what is so different in that forked ionic-react package that helps with HTMLElement is not defined error. Do you know?

@aaronksaundersI managed to fix this error without using different ionic-react. The trick is to import ionic-react components on client only using nextjs dynamic import like so

const IonApp = dynamic(
  import('@ionic/react').then(mod => mod.IonApp),
  {
    loading: () => <span />,
    ssr: false,
  },
);

Interesting! Great solution for dynamic rendering!

Still no SSR though.

Ping the guy who forked it? His name is in the readme of the project I posted

1 Like

do you need to do this for EVERY component??? that is a pain in the ass… I will stick with the solution I found for now.