小编ham*_*ami的帖子

如何在 nextjs 中创建加载更多底部以获取其余数据？（Next.js 分页）

我想单击“加载更多”底部并获取 next.js 中的其余数据，如何做到这一点？在此页面中，我用来getServerSideProps从 api 获取数据

我的页面代码是：

export default function Posts({ posts, popular }) {
  const classes = useStyles();
  return (
    <motion.main
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <InnerWrapper pbNone>
        <Title title="Latest Post" subTitle />
      </InnerWrapper>
      <HeroSection data={posts} />
      <InnerWrapper>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={8}>
            {posts.map(item => (
              <HorizontalCard key={item.id} info={item} />
            ))}

            <LoadMoreBtn />
            
          </Grid>
          <Grid item xs={12} sm={4}>
            <div className={classes.marginBottom}>
              <Title title={"Most Popular"} subTitle side={true} />
              <SideList data={popular} …

Run Code Online (Sandbox Code Playgroud)

reactjs next.js

ham*_*ami

lucky-day

6
推荐指数

1
解决办法

9488
查看次数

如何为 NEXT.js Material UI Emotion 添加动态 RTL 支持

我正在使用nextjs v12.2、@mui/material v5.9、next-i18next v11.3

我正在尝试根据不断变化的语言实现动态 Rtl/Ltr 支持

我使用此示例将 Next.JS 与 Material UI v5 集成，并使用此文档来更改 MUI 组件的方向

问题是“每次当我在 mui 组件的语言生成类之间切换时，如下图（屏幕截图）所示，对于所有 mui 组件，在此示例中为 mui 输入组件创建了一个重复的类”

我目前的实现如下：

_文档

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import theme from "theme";
import createEmotionCache from "theme/createEmotionCache";
import i18nextConfig from "next-i18next.config";

export default class MyDocument extends Document {
  render() {
    const { locale } = this.props.__NEXT_DATA__;

    return (
      <Html …

Run Code Online (Sandbox Code Playgroud)

javascript i18next reactjs material-ui next.js

ham*_*ami

2022 08-16

6
推荐指数

1
解决办法

3864
查看次数

如何在 Next.js 中实现加载屏幕

我在nextjs新和使用nextjs v9.3，next-redux-wrapper v5，@material-ui/core v4.2，和custom express server。

我正在尝试在我的 Nextjs 应用程序中更改路由时实现加载屏幕，因此我使用成帧器运动在页面之间进行转换并且工作正常，但现在如何在更改路由时使用加载组件？

我使用了这些方法，但没有用：

我目前的实现如下：

_app.js

import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import { CssBaseline } from "@material-ui/core";
import { theme } from "../lib/theme";
import withRedux from "next-redux-wrapper";
import { Provider } from "react-redux";
import reduxStore from "../store/store";
import { PersistGate } from "redux-persist/integration/react";
import { AnimatePresence } from …

Run Code Online (Sandbox Code Playgroud)

reactjs material-ui next.js framer-motion

ham*_*ami

2021 02-16

3
推荐指数

2
解决办法

6899
查看次数