title: I can't reference an image in Next.js
body: <p>I have a React component that's being used in Next.js page:</p>
  <p><strong>/pages/index.js</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Layout from &quot;../src/hoc/Layout/Layout&quot;;
  import Main from &quot;../src/components/Main/Main&quot;;
  
  const Index = () =&gt; (
     &lt;Layout&gt;
         &lt;Main /&gt;
     &lt;/Layout&gt;
  );
  export default Index
  </code></pre>
  <p>In Main.js I have the following code</p>
  <pre><code>import macbookIphone from '../../assets/images/mac-iphone.jpg';
  </code></pre>
  <p>I get the following error</p>
  <blockquote>
  <p>Module parse failed: Unexpected character '�' (1:0) You may need an
  appropriate loader to handle this file type, currently no loaders are
  configured to process this file. See
  <a href="https://webpack.js.org/concepts#loaders" rel="noreferrer">https://webpack.js.org/concepts#loaders</a> (Source code omitted for this
  binary file)</p>
  </blockquote>
  <p>I tried doing the following</p>
  <p>In <strong>next-config.js</strong></p>
  <pre><code>const withImages = require('next-images')
  module.exports = withImages()
  </code></pre>
  <p>I'm still getting the same error.</p>
  <p>What am I doing wrong?</p>