title: How to import images into a Next.js component and render it?
body: <p>I have a React component which works perfectly in an App.js file of react, I am making a page with Next.js and I want to implement this code but I have problems converting it from react to a Next.js project. I tried several ways but the image is not rendered or does not appear.</p>
  
  <p>React Code - App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import image from './images/1.png';
  import {Curtains} from 'curtainsjs';
  const planeParams = {
    vertexShaderID: "plane-vs", // our vertex shader ID
    fragmentShaderID: "plane-fs", // our framgent shader ID
    uniforms: {
      time: {
        name: "uTime", // uniform name that will be passed to our shaders
        type: "1f", // this means our uniform is a float
        value: 0,
      },
    }
  };
  class CurtainsPage extends React.Component {
    constructor( props ) {
      super(props);
      this._planes = null;
    }
  
    componentDidMount() {
      // if we got our curtains object, create the plane
      this.props.curtains &amp;&amp; this.createPlanes(this.props.curtains);
    }
  
    componentWillUpdate(nextProps, nextState) {
      // if we haven't got our curtains object before but got it now, create the plane
      if(!this.props.curtains &amp;&amp; nextProps.curtains) {
        this.createPlanes(nextProps.curtains);
      }
    }
  
    componentWillUnmount() {
      // remove the plane before unmounting component
      if(this.props.curtains &amp;&amp; this._planes) {
        this.props.curtains.removePlane(this._planes);
        this._planes = null;
      }
    }
    createPlanes(curtains) {
      // create our plane
      if(curtains) {
        this._planes = curtains.addPlane(this.planeElement, planeParams);
        this._planes.onRender(function() {
          this.uniforms.time.value++;
        });
  
      }
    }
  // register our plane element ref
    registerPlaneElement(el) {
      this.planeElement = el;
    }
  
    render() {
  
      return (
          &lt;div
              className="curtain"
              ref={(el) =&gt; this.registerPlaneElement(el)}
          &gt;
            &lt;img src={image} alt={"image"}/&gt;
          &lt;/div&gt;
      );
    }
  }
  class App extends Component {
  
    constructor( props ) {
      super(props);
  
      this.state = {
        curtains: null
      };
    }
  
    componentDidMount() {
      let curtains = new Curtains("canvas");
      this.setState({ curtains: curtains });
    }
  
    render() {
      let curtains = this.state.curtains;
      console.log("start",curtains)
      return (
                &lt;div className="App"&gt;
                      &lt;div id="canvas" /&gt;
                      &lt;CurtainsPage curtains={curtains}/&gt;
                &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Where i need to implement it.</p>
  
  <p>Next JS Code - Index.js</p>
  
  <pre><code>import { Fragment, Component } from "react";
  import Nav from "../components/Nav";
  import "./index.scss";
  
  class Index extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isLoading: false
      };
    }
  
    render() {
      return (
        &lt;Fragment&gt;
          &lt;Nav /&gt;
          &lt;div id="homeSection"&gt;
            &lt;div id="bigHeader"&gt;
  
            &lt;/div&gt;
            &lt;div id="headerFooter"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  export default Index;
  
  </code></pre>