Блог

Я использую NextJS и пытаюсь к нему привыкнуть.
У меня есть index.js страница, в которой у меня есть 6 компонентов, которые я импортировал из файла за пределами pages файла.
Мой главный вопрос в том, является ли это лучшей практикой ? это прекрасно подходит для разработки, но как насчет производства ? Должен ли я для этого переключиться на ContextAPI ? Какой из них лучше для производительности и SEO ?

Структура файла;

 /pages
  -index.js
   ...
...
/components
  -Hero.js
  ...
 

Я запросил свою базу данных, чтобы получить содержимое раздела героя, и передал его в качестве реквизита index.js на страницах следующим образом;

 export const getStaticProps = async () => {
  const { db } = await connectToDatabase();

  const getPagesFromDB = await db.collection('pages').find({}).toArray();
  const getPages = await JSON.parse(JSON.stringify(getPagesFromDB));

  const getHeroContent = getPages.filter((data) => data.section === 'hero');

  return {
    props: {
      getHeroContent,
    },
    revalidate: 1,
  };
};

export default function Home({ getHeroContent }) {
   
  console.log(getHeroContent);

  
  return (
    <>
      <Hero getHeroContent={getHeroContent}></Hero>
       ...
    </>
  );
}

 

Затем установил getHeroContent prop как непосредственно в состояние реакции в Hero.js компоненте следующим образом;

 const Hero = ({ getHeroContent }) => {
  const classes = useStyles(); 
  const [heroTitle, setHeroTitle] = useState(getHeroContent.title);
  const [heroImg, setHeroImg] = useState(getHeroContent[0].image[0].secure_url);
 

 
  
  return (
    <Box component='div' className={classes.root}>
      <div className={classes.hero}>
        <div className={classes.imgWrapper}>
          <Image
            src={heroImg}
            className={classes.img}
             
            layout='fill'
            objectFit='cover'
          ></Image>
        </div>
        <div className={classes.heroTypos}>
          <Typography variant='h2' className={classes.Typo1}>
            {heroTitle}
          </Typography>
          <Typography variant='h5' className={classes.Typo2}>
            <Link href='#!'>
              <a className={classes.Typo2Link}>
                Shop Now amp;nbsp;
                <ArrowForwardIosIcon className={classes.Typo2Icon} />
              </a>
            </Link>
          </Typography>
        </div>
      </div>
    </Box>
  );
};

export default Hero;
 

Наличие папки компонентов в корневой папке проекта и импорт компонентов на ваши страницы-очень типичный способ работы с NextJS.

Я не думаю, что в этом случае есть очевидные преимущества перехода на ContextAPI. Возможно, если вам нужно очень глубоко передать значения многим компонентам. Это скорее вопрос личных предпочтений. Но помните, что все потребители контекста будут повторно отображаться при изменении значения контекста, что может привести к проблемам с производительностью в более крупном приложении.