Как структурировать приложение NextJs

Полное руководство по NextJs для создания масштабируемых, готовых к производству приложений

Что такое Next?

Как и ReactJs, NextJs (The React Framework for Production) предоставляет вам свободу в выборе дизайна приложения и места размещения кода. Он обладает всеми лучшими функциями, которых не хватает ReactJs, включая оптимизацию изображений и шрифтов, быстрый рендеринг и гибридный статический и серверный рендеринг. Но с большой силой приходит большая ответственность

В процессе работы над приложением вы часто останавливаетесь, чтобы подумать, куда поместить то или иное, и время от времени задаетесь вопросом: а не поместить ли мне этот код в другое место? По этой причине вам нужна масштабируемая структура папок, которая не поставляется ни с React, ни с NextJs. Итак, ваш вопрос: как мне структурировать мой код? Не волнуйтесь, у меня есть решение.

Помните, что существует множество подходов, которые вы можете использовать для этого. Я не говорю, что этот — лучший. Поскольку каждый человек уникален, вам может понравиться другой подход, а не мой, только вы можете решить, что лучше для вас и вашей команды.

Звездная свежесть

Давайте сначала посмотрим на структуру, которую предоставляет нам NextJs:

Если вы запустили новое приложение NextJs, вы увидите определенные папки в корневой папке. Мы не будем беспокоиться о других файлах, таких как eslint и nextconfig, потому что они нам сейчас не нужны.

` > node_modules

страницы
api
hello.tsx
_app.tsx
index.tsx
публичный
стили
… остальные файлы

Продолжить чтение здесь https://elbarryamine.com/blog/how-to-structure-your-nextjs-application