Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there an example for Nextjs?

See original GitHub issue

Nextjs is a ssr framework but this lib tries to access DOM in the server-side.

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

ushelpcommented, Jul 7, 2020

@armspkt server-side-rendering does not support dom operation. please use on client.

1reaction

ushelpcommented, Jul 6, 2020

@armspkt Example:

import Layout from '../components/Layout';
import Head from "next/head";


class About extends React.Component {
  constructor(props) {
    super(props);
    
    this.qrcodeDOM = React.createRef();
    this.qrcode=null;
  }
  
  generate(color){
      if(this.qrcode){
          this.qrcode.clear();
      }
      var options = {
          text: "https://github.com/ushelp/EasyQRCodeJS",
          colorDark : color?color:'#000000'
      };
      this.qrcode=new QRCode(this.qrcodeDOM.current, options);
  }

  componentDidMount() { 
       this.generate()
  }
  
  render() {
    return (
      <Layout>
          <p>This is About page</p>
          <div ref={this.qrcodeDOM}></div>
          <button onClick={this.generate.bind(this, '#ff0000')}>QRCode Generate</button>
          <Head>
           <script type="text/javascript" src="/static/easy.qrcode.min.js"></script>
         </Head>
           <p>This is About page</p>
      </Layout>
    );
  }
}

export default About;

Top Results From Across the Web

Showcase | Next.js

Meet hundreds of beautiful websites built with Next.js by Vercel · Netflix Jobs · TikTok · Twitch · Hulu · Notion · Target...

Examples of next.js - GitHub

No information is available for this page.

Next.js tutorial with examples: Build better React apps with Next

Next.js is a React front-end framework that lets you improve your app's user-experience and SEO through server-side rendering.

Find your Next.js templates - Vercel

Find your Next.js templates. Jumpstart your app development process with our pre-built Next.js solutions. Filter By: Filter Templates. Clear. Framework.

18 Great Examples of Next.js Websites - Pagepro

Examples of big eCommerce Next js websites: ... Deliveroo is a food delivery app that helps with ordering food from restaurants and takeaways....