Embed Apps in NEXT.JS | Lowcoder Documentation

Native embedding in your NEXT.JS -based Web App

First, install the Lowcoder SDK. Lowcoder publishes with every Version Release, a new version of Lowcoder SDK too.

yarn:

yarn add lowcoder-sdk

npm:

npm install lowcoder-sdk

Integrate a Lowcoder App or Module into your existing app

Publish your app/module in Lowcoder.
Set the app/module's access privilege as public.
Add code in your existing app as below.

Import CSS Styles

import "lowcoder-sdk/dist/style.css";

Embed Lowcoder Apps

Create Wrapper Component to Embed Lowcoder Apps

"use client"
import { LowcoderAppView } from "lowcoder-sdk";

function LowcoderAppWrapper(props) {
  const { appId } = props;
  return (
    <section style={{marginTop: '2rem'}}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <h1>Lowcoder App</h1>
      </div>
      <LowcoderAppView
        appId={appId}
      />
    </section>
  )
}

export default LowcoderAppWrapper;

Dynamically import the LowcoderAppWrapper component in the file where you want to embed the Lowcoder app

const LowcoderAppWrapper = dynamic(
  () => import('../components/LowcoderAppWrapper'), {ssr: false}
);

Now, we can embed our Lowcoder app by just passing the appId to the imported LowcoderAppWrapper component.

<LowcoderAppWrapper
   appId='66ab6af10390b00771b2e649'
/>

Embed Lowcoder Modules

Create Wrapper Component to Embed Lowcoder Modules

"use client"
import { useRef } from "react";
import { LowcoderAppView } from "lowcoder-sdk";

function LowcoderModuleWrapper(props) {
  const { appId } = props;
  const appRef = useRef();
  return (
    <section style={{marginTop: '2rem'}}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <h1>Lowcoder Module</h1>
        <button
          type="button"
          onClick={() => {
            appRef?.current?.invokeMethod("ShowNotification")
          }}
        >
          Invoke module method
        </button>
      </div>
      <LowcoderAppView
        ref={appRef}
        appId={appId}
    
      />
    </section>
  )
}

export default LowcoderModuleWrapper;

Dynamically import the LowcoderModuleWrapper component in the file where you want to embed the Lowcoder Module

const LowcoderModuleWrapper = dynamic(
  () => import('../components/LowcoderModuleWrapper'), {ssr: false}
);

Now, we can embed our Lowcoder module by just passing the appId to the imported LowcoderModuleWrapper component.

<LowcoderModuleWrapper
   appId="660f13367c18a91b174fe96d"
/>

Demo

The result of the above code in NEXT.JS App is shown below in the Demo. The List component with Yellow background is the Lowcoder App and the Table component is the Lowcoder Module :

Properties

Name

Type

Description

Default value

appId

string

The app's id is required!

baseUrl

string

The api base url of the Lowcoder Instance.

https://api-service.lowcoder.cloud

onModuleEventTriggered

(eventName: string) => void

(Only for Modules) Triggered when module's custom event is triggered. Works only when the app is a module.

onModuleOutputChange

(output: any) => void

(Only for Modules) Triggered when module's outputs change. Works only when the app is a module.