nextjs app router training

Next.js App Router

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

Этот проект направлен на

• дизайн для начинающих, чтобы понять
• Посетители могут увидеть код и понять, как он работает
• Устранение ненужного кода как можно больше, чтобы сосредоточиться на коде next.js
• охватывание множества шаблонов для маршрутизатора приложений

Примеры

Пример	Добрый	Статус
Гнездование	макет	✅
Шаблон	макет	✅
Перезапись метаданных	метаданные	✅
Создание изображения OpenGraph	метаданные	✅
Серверные компоненты	рендеринг	✅
Паттерны композиции сервера и клиента	рендеринг	✅
РИС -нагрузка	рендеринг	✅
Компоненты клиента и сервера	базовый	✅
Группировка	маршрутные группы	✅
Загрузка немедленно	загрузка	✅
Загрузка с потоковой передачей	загрузка	✅
Загрузка с предварительной загрузкой данных	загрузка	✅
Ошибка немедленно	ошибка	✅
Не найдено	ошибка	✅
Один сегмент	динамические маршруты	✅
Уловка всех сегментов	динамические маршруты	✅
Дополнительные сегменты ловли	динамические маршруты	✅
Параллельные маршруты	параллельные маршруты	✅
Условные маршруты	параллельные маршруты	✅
Перехватывание маршрутов	перехватывание маршрутов	✅
Модальный с параллельными маршрутами	перехватывание маршрутов	✅
Кэширование данных	вынесение	✅
Запросить запоминание (@Server)	кэширование	✅
Кэш данных (@Server)	кэширование	✅
Полный кеш маршрута (@Server)	кэширование	✅
Кэш маршрутизатора (@Client)	кэширование	✅
Обработчики маршрута	обработчики маршрута	✅
Динамические сегменты маршрута	обработчики маршрута	✅
Действия сервера	Действия сервера	✅
НЕВОДИТЕЛЬНЫЕ ЭЛЕМЕНТЫ	Действия сервера	✅
Оптимистичные обновления	Действия сервера	✅
Арестовать	безопасность	✅
Только сервер end env	безопасность	✅
Покупки	витрины	✅

Добавление нового образца

Добро пожаловать, чтобы отправить новый пример, но, пожалуйста, напишите упрощенный код как можно больше, чтобы понять новичков!

$ git clone [email protected]:hiroppy/nextjs-app-router-training.git
$ cd nextjs-app-router-training
$ npm i
$ mkdir src/app/examples/new-example
# adding code to src/app/examples/new-example
$ # editing src/app/examples/data.ts to add meta data, please refer type definitions
$ npm run generate
$ # editing a table in README.md 

Благодаря

• Next.js App Router Playgrouge