title: Why is index.js file rendering 2 times giving a div twice on the website?
body: <p>I was trying to build a simple e-commerce website with Next.js + Redux + Tailwind.</p>
  <p>The problem is in this the last 2 <code>p</code> tags are repeated:</p>
  <p><a href="https://i.stack.imgur.com/DYhcT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYhcT.png" alt="enter image description here" /></a></p>
  <p>I think the problem is with SSR in Next.js, <code>index.js</code> is rendered one time on server side and on client side too.
  I don't know if <code>getInitialProps</code> would solve this issue.
  I tried using class components in <code>_app.js</code> and adding <code>getInitialProps</code> into it, but it didn't work.</p>
  <p>My <code>/index.js</code> is like:</p>
  <pre><code>import React from &quot;react&quot;;
  import { NavbarContainer } from &quot;../components/Navbar/Navbar.container&quot;;
  import {
    Box,
  } from &quot;@chakra-ui/react&quot;;
  const Home = () =&gt; {
    return (
      &lt;&gt;
        &lt;Box className=&quot;&quot;&gt;
          &lt;NavbarContainer/&gt;
          &lt;Box spacing={3} className=&quot;btmList&quot;&gt; iainicback&lt;/Box&gt;
          &lt;Box spacing={3} className=&quot;btmList&quot;&gt; iainicback&lt;/Box&gt;
        &lt;/Box&gt;
      &lt;/&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>My <code>_app.js</code> is like:</p>
  <pre><code>import App from &quot;next/app&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import { store } from &quot;../redux&quot;;
  import React from &quot;react&quot;;
  import &quot;../styles/globals.css&quot;;
  import { extendTheme } from &quot;@chakra-ui/react&quot;;
  import { Chakra } from &quot;../styles/Chakra&quot;;
  
  // 2. Extend the theme to include custom colors, fonts, etc
  const colors = {
    brand: {
      900: &quot;#1a365d&quot;,
      800: &quot;#153e75&quot;,
      700: &quot;#2a69ac&quot;,
      200: &quot;#384d&quot;,
    },
  };
  
  const theme = extendTheme({ colors });
  
  const MyApp = (props) =&gt; {
  
      const { Component, appProps } = props
      return (
        &lt;Provider store={store}&gt;
          &lt;Chakra theme={theme} cookies={appProps?.cookies}&gt;
            &lt;Component {...appProps} /&gt;
          &lt;/Chakra&gt;
        &lt;/Provider&gt;
      );
    
  }
  
  export default MyApp
  </code></pre>
  <p>This is my folder structure:</p>
  <p><a href="https://i.stack.imgur.com/jUOee.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jUOee.png" alt="enter image description here" /></a></p>