jurgob/Nexmo Client SDK Next.js Home example

## Nexmo Client SDK Next.js Home example
import Head from 'next/head'
const TOKEN = "<YOUR USER TOKEN HERE>" //check here for the token creation: https://developer.nexmo.com/client-sdk/tutorials/app-to-phone/client-sdk/generate-jwt

const NexmoMe = ({id, name}) => (
  <div>
    <b>Name: </b><span>{name}</span><br />
    <b>Id: </b><span>{id}</span>
  </div>
)


class NexmoClientWidget extends React.Component {
  constructor(){
    super();
    this.state = {
      audioTag: null,
      me: null,
      nexmoClient: null
    }
  }

  componentDidMount() {
    const isServer = typeof window === 'undefined'
    console.log(`isServer` , isServer)
    const NexmoClient = !isServer ? require('nexmo-client') : null

    console.log(`NexmoClient `, NexmoClient)
    const USER_JWT = this.props.token;
    console.log(`nexmo_client .props`, this.props)

    if(NexmoClient){

      const nexmoClient = new NexmoClient({ debug: true })
        .login(USER_JWT)
        .then(app => {
          console.log(`app: `, app)
          this.setState((state, props) => {
            return {
              ...this.state,
              me: {
                name: app.me.name,
                id: app.me.id
              },
              nexmoClient: app

            }
          })

          // app.callServer("")
          //   .then(call => {
          //     console.log(`call `, call)
          //   })


        })

    }
  }

  render() {
    return (
      <div>
        <h1>Nexmo Audio </h1>
        {this.state.me && <NexmoMe name={this.state.me.name} id={this.state.me.id} />}

         <audio
          controls
          ref={(audio) => {
            this.audioTag = audio;
          }}
        >
          <source></source>
        </audio>
      </div>
    );

  }
}


export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className="title">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <NexmoClientWidget
          token={TOKEN}

        />


      </main>

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
        </a>
      </footer>

      <style jsx>{`
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        footer img {
          margin-left: 0.5rem;
        }

        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        .title a {
          color: #0070f3;
          text-decoration: none;
        }

        .title a:hover,
        .title a:focus,
        .title a:active {
          text-decoration: underline;
        }

        .title {
          margin: 0;
          line-height: 1.15;
          font-size: 4rem;
        }

        .title,
        .description {
          text-align: center;
        }

        .description {
          line-height: 1.5;
          font-size: 1.5rem;
        }

        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }

        .grid {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;

          max-width: 800px;
          margin-top: 3rem;
        }

        .card {
          margin: 1rem;
          flex-basis: 45%;
          padding: 1.5rem;
          text-align: left;
          color: inherit;
          text-decoration: none;
          border: 1px solid #eaeaea;
          border-radius: 10px;
          transition: color 0.15s ease, border-color 0.15s ease;
        }

        .card:hover,
        .card:focus,
        .card:active {
          color: #0070f3;
          border-color: #0070f3;
        }

        .card h3 {
          margin: 0 0 1rem 0;
          font-size: 1.5rem;
        }

        .card p {
          margin: 0;
          font-size: 1.25rem;
          line-height: 1.5;
        }

        .logo {
          height: 1em;
        }

        @media (max-width: 600px) {
          .grid {
            width: 100%;
            flex-direction: column;
          }
        }
      `}</style>

      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  )
}
	import Head from 'next/head'
	const TOKEN = "<YOUR USER TOKEN HERE>" //check here for the token creation: https://developer.nexmo.com/client-sdk/tutorials/app-to-phone/client-sdk/generate-jwt

	const NexmoMe = ({id, name}) => (
	<div>
	<b>Name: </b><span>{name}</span><br />
	<b>Id: </b><span>{id}</span>
	</div>
	)


	class NexmoClientWidget extends React.Component {
	constructor(){
	super();
	this.state = {
	audioTag: null,
	me: null,
	nexmoClient: null
	}
	}

	componentDidMount() {
	const isServer = typeof window === 'undefined'
	console.log(`isServer` , isServer)
	const NexmoClient = !isServer ? require('nexmo-client') : null

	console.log(`NexmoClient `, NexmoClient)
	const USER_JWT = this.props.token;
	console.log(`nexmo_client .props`, this.props)

	if(NexmoClient){

	const nexmoClient = new NexmoClient({ debug: true })
	.login(USER_JWT)
	.then(app => {
	console.log(`app: `, app)
	this.setState((state, props) => {
	return {
	...this.state,
	me: {
	name: app.me.name,
	id: app.me.id
	},
	nexmoClient: app

	}
	})

	// app.callServer("")
	// .then(call => {
	// console.log(`call `, call)
	// })



	})

	}
	}

	render() {
	return (
	<div>
	<h1>Nexmo Audio </h1>
	{this.state.me && <NexmoMe name={this.state.me.name} id={this.state.me.id} />}

	<audio
	controls
	ref={(audio) => {
	this.audioTag = audio;
	}}
	>
	<source></source>
	</audio>
	</div>
	);

	}
	}



	export default function Home() {
	return (
	<div className="container">
	<Head>
	<title>Create Next App</title>
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main>
	<h1 className="title">
	Welcome to <a href="https://nextjs.org">Next.js!</a>
	</h1>

	<NexmoClientWidget
	token={TOKEN}

	/>


	</main>

	<footer>
	<a
	href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
	target="_blank"
	rel="noopener noreferrer"
	>
	Powered by{' '}
	<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
	</a>
	</footer>

	<style jsx>{`
	.container {
	min-height: 100vh;
	padding: 0 0.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	main {
	padding: 5rem 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	footer {
	width: 100%;
	height: 100px;
	border-top: 1px solid #eaeaea;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	footer img {
	margin-left: 0.5rem;
	}

	footer a {
	display: flex;
	justify-content: center;
	align-items: center;
	}

	a {
	color: inherit;
	text-decoration: none;
	}

	.title a {
	color: #0070f3;
	text-decoration: none;
	}

	.title a:hover,
	.title a:focus,
	.title a:active {
	text-decoration: underline;
	}

	.title {
	margin: 0;
	line-height: 1.15;
	font-size: 4rem;
	}

	.title,
	.description {
	text-align: center;
	}

	.description {
	line-height: 1.5;
	font-size: 1.5rem;
	}

	code {
	background: #fafafa;
	border-radius: 5px;
	padding: 0.75rem;
	font-size: 1.1rem;
	font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
	DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	}

	.grid {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	max-width: 800px;
	margin-top: 3rem;
	}

	.card {
	margin: 1rem;
	flex-basis: 45%;
	padding: 1.5rem;
	text-align: left;
	color: inherit;
	text-decoration: none;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	transition: color 0.15s ease, border-color 0.15s ease;
	}

	.card:hover,
	.card:focus,
	.card:active {
	color: #0070f3;
	border-color: #0070f3;
	}

	.card h3 {
	margin: 0 0 1rem 0;
	font-size: 1.5rem;
	}

	.card p {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.5;
	}

	.logo {
	height: 1em;
	}

	@media (max-width: 600px) {
	.grid {
	width: 100%;
	flex-direction: column;
	}
	}
	`}</style>

	<style jsx global>{`
	html,
	body {
	padding: 0;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
	Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
	sans-serif;
	}

	* {
	box-sizing: border-box;
	}
	`}</style>
	</div>
	)
	}