Estaba tratando de crear un sitio web de comercio electrónico simple con Next.js + Redux + Tailwind.

El problema está en esto se repiten las últimas 2 p etiquetas:

Creo que el problema es con SSR en Next.js, index.js se procesa una vez en el lado del servidor y también en el lado del cliente. No sé si getInitialProps resolvería este problema. Intenté usar componentes de clase en _app.js y agregarle getInitialProps , pero no funcionó.

Mi /index.js es como:

 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;

Mi _app.js es como:

 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

Esta es mi estructura de carpetas: