# 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.

{% hint style="info" %}
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>
{% endhint %}

**Example:**

<pre class="language-javascript"><code class="lang-javascript">return (
    &#x3C;div>
         {/* --  Manifold Widgets -- */}
        &#x3C;script src="https://connect.manifoldxyz.dev/latest/connect.umd.js" async>&#x3C;/script>
        &#x3C;link rel="stylesheet" href="https://connect.manifoldxyz.dev/latest/connect.css">        
<strong>        ....
</strong><strong>   &#x3C;/div>
</strong><strong>)
</strong></code></pre>

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
```

{% hint style="warning" %}
If you always want the latest version, use **latest** for the \<WIDGET\_VERSION>. However, due to the changing nature of the codebase, it is possible that the "newer" **latest** is no longer compatible with the "previous" **latest** used to develop the app. It is thus recommended that you use a specific version of a widget for consistent results.
{% endhint %}

You can find a list of widgets, versions and links [here](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/directory).

### Using Widgets

To use a widget, simply add a `<div>` into each component you wish to use it in.

**Example:**

```html
<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](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/directory).

#### 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

```javascript
window.dispatchEvent(new Event("m-refresh-widgets"));
```

### Styling

Widgets are styled using standard CSS.

Some widgets may include links pointing to additional stylesheets. These additional stylesheets (usually named `<WIDGET_NAME>.manifold-light.css` or `<WIDGET_NAME>.manifold-dark.css`) build **on top of** the base stylesheet (usually named `<WIDGET_NAME>.css`), thus the additional stylesheets should be included **after** the base one.

## Examples

Examples of commonly used features can be found [here](https://github.com/manifoldxyz/manifold-templates/tree/main/nextjs). Please feel free to use this as a starting point to building your own dApp.