I was trying to build a simple e-commerce website with nextjs + redux + tailwind
the problem is
In this the last 2 p tag are repeated
i think the problem is with ssr in nextjs
indexjs 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
didn’t work doe.
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