Next.js 12 Hydration Failure问题：移动代码后报错的排查与解决

我正在学习Material UI与Next.js 12（采用pages目录架构），开发网站3小时均无异常，但将代码移动到其他文件夹后，突然出现Next.js Hydration Failure（初始UI与服务端渲染内容不匹配）错误。奇怪的是，撤销所有改动后错误仍未消失，我怀疑代码存在问题但无法定位。

补充说明 #

• 查阅了Next.js官方文档，了解到无效HTML（如p标签内嵌套div）会引发该问题，但我认为代码中不存在此类情况；
• 也查看了Stack Overflow上的类似问题，但受限于经验仍无法定位错误；
• 网站目前仅制作组件mock，尚未添加任何功能。

页面index.js源码 #

import Head from 'next/head';
import { 
  Grid, 
  Divider, 
  TextField,
  Button,
  Box,
  Card,
  CardActions,
  CardContent,
  Typography,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Stack
} from '@mui/material';

export default function ToDoList() {
  const bull = (
    <Box
      component="span"
      sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
    >
      •
    </Box>
  );
  return (
    <>
      <Head>
        <title>Quick To-Do List</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Box
          component="form"
          sx={{
            '& .MuiTextField-root': { width: '50ch' },
            height: '80vh',
            width: '80vw'
          }}
          noValidate
          autoComplete="off"
        >
          <Card sx={{ minWidth: 275 }}>
            <CardContent>
              <Box
                component="form"
                sx={{
                  '& .MuiTextField-root': { width: '50ch' },
                  margin: '2rem'
                }}
                noValidate
                autoComplete="off"
              >
                <Grid container>
                  <Grid item xs>
                    <Stack spacing={1}>
                      <TextField
                        id="standard-name"
                        label="What Do You Want to Do?"
                        value="Buy LARGE Trash Bags"
                        InputProps={{endAdornment: <Button variant="contained">Submit</Button>}}
                      />
                      <FormGroup>
                        <FormControlLabel control={<Checkbox defaultChecked />} label="Is It Done Yet?" />
                      </FormGroup>
                      <p>Your User ID is: <strong>eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</strong></p>
                    </Stack>
                  </Grid>
                  <Divider orientation="vertical" flexItem>
                    Your Task Lists {'>'}
                  </Divider>
                  <Grid item xs>
                    <Box
                      sx={{
                        height: '30vh',
                        overflow: "hidden",
                        overflowY: "scroll"
                      }}
                    >
                      <Stack spacing={2}>
                        <Card sx={{ minWidth: 275 }}>
                          <CardContent>
                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
                              Word of the Day
                            </Typography>
                            <Typography variant="h5" component="div">
                              be{bull}nev{bull}o{bull}lent
                            </Typography>
                            <Typography sx={{ mb: 1.5 }} color="text.secondary">
                              adjective
                            </Typography>
                            <Typography variant="body2">
                              well meaning and kindly.
                              <br />
                              {'"a benevolent smile"'}
                            </Typography>
                          </CardContent>
                          <CardActions>
                            <FormGroup>
                              <FormControlLabel control={<Checkbox defaultChecked />} label="The Job is Done!" />
                            </FormGroup>
                          </CardActions>
                        </Card>
                        <Card sx={{ minWidth: 275 }}>
                          <CardContent>
                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
                              Word of the Day
                            </Typography>
                            <Typography variant="h5" component="div">
                              be{bull}nev{bull}o{bull}lent
                            </Typography>
                            <Typography sx={{ mb: 1.5 }} color="text.secondary">
                              adjective
                            </Typography>
                            <Typography variant="body2">
                              well meaning and kindly.
                              <br />
                              {'"a benevolent smile"'}
                            </Typography>
                          </CardContent>
                          <CardActions>
                            <FormGroup>
                              <FormControlLabel control={<Checkbox defaultChecked />} label="The Job is Done!" />
                            </FormGroup>
                          </CardActions>
                        </Card>
                        <Card sx={{ minWidth: 275 }}>
                          <CardContent>
                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
                              Word of the Day
                            </Typography>
                            <Typography variant="h5" component="div">
                              be{bull}nev{bull}o{bull}lent
                            </Typography>
                            <Typography sx={{ mb: 1.5 }} color="text.secondary">
                              adjective
                            </Typography>
                            <Typography variant="body2">
                              well meaning and kindly.
                              <br />
                              {'"a benevolent smile"'}
                            </Typography>
                          </CardContent>
                          <CardActions>
                            <FormGroup>
                              <FormControlLabel control={<Checkbox defaultChecked />} label="The Job is Done!" />
                            </FormGroup>
                          </CardActions>
                        </Card>
                        <Card sx={{ minWidth: 275 }}>
                          <CardContent>
                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
                              Word of the Day
                            </Typography>
                            <Typography variant="h5" component="div">
                              be{bull}nev{bull}o{bull}lent
                            </Typography>
                            <Typography sx={{ mb: 1.5 }} color="text.secondary">
                              adjective
                            </Typography>
                            <Typography variant="body2">
                              well meaning and kindly.
                              <br />
                              {'"a benevolent smile"'}
                            </Typography>
                          </CardContent>
                          <CardActions>
                            <FormGroup>
                              <FormControlLabel control={<Checkbox defaultChecked />} label="The Job is Done!" />
                            </FormGroup>
                          </CardActions>
                        </Card>
                      </Stack>
                    </Box>
                  </Grid>
                </Grid>
              </Box>
            </CardContent>
          </Card>
        </Box>
      </main>
    </>
  )
}

问题解决更新 #

原来我的补充说明有误！我将Card放在了Box内部，这正是引发错误的原因！将Card移到Box外部后，问题得到解决。

内容的提问来源于stack exchange，提问作者Zero Gear