Блог

Как вы знаете, в nextjs для маршрутизации мы должны использовать структуру папок. Но что мне делать, если у меня есть компонент большого представления, и я хочу разделить его на множество небольших компонентов в разных файлах? И в то же время скрывать их от внешних запросов. Та же проблема, которую я вижу с файлами css (css в компонентах в стиле js). Было бы удобно, чтобы они находились рядом с его компонентом.

Вы работаете с React здесь, поэтому есть много мнений о том, как структурировать ваше приложение.

Лично я предпочитаю создавать компоненты «Страницы» в каталоге Страниц. В рамках этих компонентов я обычно делаю такие вещи, как проверка необходимой аутентификации или другие «мета» вещи.

Это означает, что я могу остановить рендеринг, обрабатывать перенаправления на стороне клиента и так далее до того, как контент попадет на страницу.

pages/about.jsx

 function AboutPage() {  const loggedIn = useLoggedIn();   if (!loggedIn) return null;   return lt;AboutWrapper /gt; }  

Я начну создавать «представление» страницы в том, что я называю оболочкой:

components/AboutWrapper/index.jsx

 const Title = styled.h1`  font-weight: strong; `;  function AboutWrapper() {  return  lt;divgt;  lt;Titlegt;About pagelt;/Titlegt;  lt;HeroCarousel /gt;  lt;/divgt; }  

Имейте в виду, что, несмотря на то, что содержимое оболочки не будет отображаться, если вы остановите его отображение в компоненте страницы, вы все еще предоставляете JS, поэтому не помещайте какую — либо конфиденциальную информацию непосредственно в эти файлы-запросите их у своего сервера. (Или каталог api NextJS)

Если представление массивное, я позабочусь о том, чтобы часто используемые части страницы находились в их собственном файле в каталоге компонентов:

components/HeroCarousel/index.jsx

 const Container = styled.div`  background-color: #F2F2F2; `;  function HeroCarousel() {  return  lt;Containergt;  lt;img src="" /gt;  lt;img src="" /gt;  lt;img src="" /gt;  lt;/Containergt; }  

Я решил сделать это вот так. Оставьте папку «страницы» только для маршрутизации и сохраните все компоненты и стили в папке «представления», которая будет находиться рядом с папкой «страницы».