如何在Next.js (React)中创建粘性页脚

npx create-next-app my-app

cd my-app
npm install styled-components react-sticky-footer

import styled from 'styled-components';
import StickyFooter from 'react-sticky-footer';

const Container = styled.div`
  min-height: 100vh;
  display: flex;
  flex-direction: column;
`;

const Content = styled.div`
  flex: 1;
`;

const Footer = styled(StickyFooter)`
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
`;

const Home = () => {
  return (
    <Container>
      <Content>
        {/* Add your page content here */}
        <h1>Hello, World!</h1>
      </Content>
      <Footer
        bottomThreshold={50}
        normalStyles={{
          backgroundColor: "#f1f1f1",
          padding: "20px",
          textAlign: "center",
        }}
        stickyStyles={{
          backgroundColor: "rgba(255,255,255,.8)",
          padding: "20px",
          textAlign: "center",
        }}
      >
        {/* Add your footer content here */}
        <p>This is a sticky footer.</p>
      </Footer>
    </Container>
  );
};

export default Home;

npm run dev