NextJS

Basics
Installing Widgets
Each widget comes with a Javascript and CSS file.  To add a widgets to your website, you will need to add its corresponding Javascript and CSS to the pages/_app.js of the Next app.
Make sure to include the async in the script tag you will see an error when doing yarn build 
https://nextjs.org/docs/messages/no-sync-scripts​
Example:
return (
    <div>
         {/* --  Manifold Widgets -- */}
        <script src="https://connect.manifoldxyz.dev/latest/connect.umd.js" async></script>
        <link rel="stylesheet" href="https://connect.manifoldxyz.dev/latest/connect.css">        
        ....
   </div>
)
The uri for the Javascript and CSS for each widget is as follows:
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.umd.min.js
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.css
If you always want the latest version, use latest for the <WIDGET_VERSION>.
You can find a list of widgets, versions and links here.
Using Widgets
To use a widget, simply add a <div> into each component you wish to use it in.
Example:
<div dangerouslySetInnerHTML={{ 
  __html: 
    `<div
      data-widget='m-connect'
      data-grant-type='<your app grant type, `signature` or `token`>'
      data-client-id='<your app client id>'  
      data-app-name='<your app name>'  
      data-network='<your desired networks chain id>'
    ></div>`
}} />
You can find a list of widgets, versions and links here.
Refreshing and Loading Widgets on Page Change
Since the Javascript only injects the widgets on the first page load, reactive apps will need to manually trigger the injection code upon page changes/refreshes.  Do this by emitting the m-refresh-widgets event
window.dispatchEvent(new Event("m-refresh-widgets"));
Styling
Widgets are styled using standard CSS.
Examples
Examples of commonly used features can be found here. Please feel free to use this as a starting point to building your own dApp.
Last modified 1mo ago