I was trying to build a simple e-commerce website with Next.js + Redux + Tailwind.

The problem is in this the last 2 p tags are repeated:

I think the problem is with SSR in Next.js, index.js is rendered one time on server side and on client side too. I don't know if getInitialProps would solve this issue. I tried using class components in _app.js and adding getInitialProps into it, but it didn't work.

My /index.js is like:

import React from "react";
import { NavbarContainer } from "../components/Navbar/Navbar.container";
import {
  Box,
} from "@chakra-ui/react";
const Home = () => {
  return (
    <>
      <Box className="">
        <NavbarContainer/>
        <Box spacing={3} className="btmList"> iainicback</Box>
        <Box spacing={3} className="btmList"> iainicback</Box>
      </Box>
    </>
  );
};

export default Home;

My _app.js is like:

import App from "next/app";
import { Provider } from "react-redux";
import { store } from "../redux";
import React from "react";
import "../styles/globals.css";
import { extendTheme } from "@chakra-ui/react";
import { Chakra } from "../styles/Chakra";

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
    200: "#384d",
  },
};

const theme = extendTheme({ colors });

const MyApp = (props) => {

    const { Component, appProps } = props
    return (
      <Provider store={store}>
        <Chakra theme={theme} cookies={appProps?.cookies}>
          <Component {...appProps} />
        </Chakra>
      </Provider>
    );
  
}

export default MyApp

This is my folder structure: