Has anyone successfully integrated Amity in a Next.js app?

Hi, I’m trying to integrate Amity Social Cloud via the Web UI Kit into a Next.js application.

I’m following the guide to render the complete social feature: Using as a whole feature with the default settings - Amity Docs

So my page looks like this:

import Head from "next/head";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit";

const MySocialPage = () => {
  return (
    <div>
      <Head>
        <title>My Social</title>
        <meta name="description" content="My Social" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main style={{ paddingTop: 64 }}>
        <AmityUiKitProvider
          apiKey={process.env.NEXT_PUBLIC_AMITY_API_KEY}
          userId="user1234"
          displayName="Greg"
        >
          <AmityUiKitSocial />
        </AmityUiKitProvider>
      </main>
    </div>
  );
};

export default MySocialPage;

I’m getting a rendered social page (layout is there but it’s not functional - for example the actions are greyed out)

…and a whole load of errors in the console such as:

“Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?”

“Warning: Failed prop type: The prop apiEndpoint is marked as required in ForwardRef, but its value is undefined.”

“Warning: React does not recognize the maxRows prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase maxrows instead. If you accidentally passed it from a parent component, remove it from the DOM element.”

“Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code”

“ReactTruncateMarkup tried to render

, but truncating React components is not supported, the full content is rendered instead. Only DOM elements are supported.”

etc, etc…

These are followed up by a load of:

POST https://api.sg.amity.co/v1/device 401 errors

I could really use some help! Thanks

In addition, if I add apiEndpoint and apiRegion props (which are optional according to the docs), like so:

<AmityUiKitProvider
          apiKey={process.env.NEXT_PUBLIC_AMITY_API_KEY}
          apiEndpoint="api.eu.amity.co"
          apiRegion="api.eu.amity.co"
          userId="user1234"
          displayName="Greg"
        >
          <AmityUiKitSocial />
        </AmityUiKitProvider>

I get a new error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'code')
    at e.requestAccessTokenWithApiKey (client.min.js?726e:35:105981)
    at async t.authenticateAndConnect (client.min.js?726e:24:9741)

Further to the above, if I make the manual api region URLs absolute like so:

<AmityUiKitProvider
          key="user1234"
          apiKey={process.env.NEXT_PUBLIC_AMITY_API_KEY}
          apiEndpoint="https://api.eu.amity.co"
          apiRegion="https://api.eu.amity.co"
          userId="user1234"
          displayName="Greg"
        >
          <AmityUiKitSocial />
        </AmityUiKitProvider>

This removes the error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'code')
    at e.requestAccessTokenWithApiKey (client.min.js?726e:35:105981)
    at async t.authenticateAndConnect (client.min.js?726e:24:9741)

and the app then becomes functional (hooray), but I still have a bunch or console errors that appear to need fixing on Amity’s end!

I think the docs also need updating. They tell me that the API region/endpoint props are optional when it appears at least one of them is not.

Hi @ham can you pls help share the error/screenshots of code that appear on the console? so the team can do a further checking.

Sorry, I’ve given up on the web UI kit because it’s not responsive. The errors are listed above. I’m now using the js-sdk and building the entire UI using MUI so it’s fully responsive in my PWA.

1 Like

@ham well noted, thanks for the update and informing us :pray: