nextjs-powerbi

NextJS PowerBI Component

A React component intended to bootstrap a Power BI dashboard into your NextJS application

This project is a fork of React PowerBI Component, whose functionality has been updated to work within the context of a NextJS app. Please submit any updates or issues to the parent project

You probably don't want to use this package in your application. It is not actively supported and exists to serve only a couple particular use cases

How to Use

import React, { Component } from "react";
import PowerbiEmbedded from "nextjs-powerbi";

class App extends Component {
  render() {
    return (
      <div className="App">
        <PowerbiEmbedded
          id={`${YOUR_REPORT_ID}`} // required
          embedUrl={`${YOUR_EMBED_URL}`} // required
          accessToken={`${YOUR_EMBED_TOKEN}`} // required
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          pageName={`${YOUR_PAGE_ID}`}
          embedType={`${EMBED_TYPE}`}
          tokenType={`${TOKEN_TYPE}`}
          permissions={`${PERMISSIONS}`}
          settings={
            {
              // any settings including localeSettings
            }
          }
          width="600px"
          height="900px"
        />
      </div>
    );
  }
}

export default App;

Mobile Optimization

You only need to add mobile prop as boolean.

That set a configuration { layoutType: models.LayoutType.MobilePortrait }.

Check this reference

Embed Type

The embed type variable allows you to pass in the requested PowerBI "Type", be that a report, dashboard or tile. See reference. By default, report is selected.