Алексей Уколов

`${process.env.SERVER_URL}/scr/static/:path*`

Точно должно быть scr, а не src?

Вы можете либо переопределить handler для image и в нём определять размер и показывать ошибку (или, если всё ок, передавать обработку дальше базовому функционалу, как в примере); либо проверять размер на бэкенде при сабмите формы. А правильное решение - сделать и то, и другое.

Проблема в том, что вы предзагружаете изображения по их реальному пути, а Next, при использовании компонента Image без атрибута unoptimized проксирует их через себя, чтобы работало сжатие и ресайз.

Пути решения два:

1. На главной странице указать всем изображениям unoptimized. Тогда изображения просто будут грузиться с указанного адреса безо всякой дополнительной обработки.
   
2. В вашем хуке получать через getImageProps() некстовский путь до изображения и предзагружать его. Тут важно ещё вынести пропсы width и quality (а лучше вообще все, кроме src) для Image с главной страницы в отдельный объект, который можно будет импортировать в файле хука, чтобы и там и там параметры были одинаковыми. Иначе, если вы на главной поменяете размеры или качество, прелоадинг снова сломается (потому что изменится итоговый url).
   

Удобного способа это сделать нет. Вы можете:

• Положить в "корень" page.js, в котором будет находиться редирект.
  
• Положить в "корень" page.js, в котором будет дублироваться логика из [category] с подставлением дефолтного параметра.
  
• Воспользоваться Optional Catch-all Segments, но тут надо иметь в виду, что Catch-all Segment - это не то же самое, что Dynamic Segment, он будет ловить все уровни иерархии, а не только первый.
  

Решения расположены в порядке убывания адекватности по моему мнению.

Это работает совсем не так. В вашей структуре @modal - это слот в layout, у него нет отдельного URL.

However, slots are not route segments and do not affect the URL structure. For example, for /@analytics/views, the URL will be /views since @analytics is a slot.

https://nextjs.org/docs/app/building-your-applicat...

Вам же нужно читать следующий раздел на этой же странице: https://nextjs.org/docs/app/building-your-applicat...

React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs (props, state, and context).
Components breaking this rule behave unpredictably and cause bugs. To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) twice in development.

https://react.dev/reference/react/StrictMode#fixin...

Since Next.js 13.4, Strict Mode is true by default with app router. You can still disable Strict Mode by setting reactStrictMode: false.

https://nextjs.org/docs/app/api-reference/next-con...

Может, просто "use client" надо добавить?

Никак.

GET-запросы в Нексте кэшируются, попробуйте это кэширование отключить.

Если по действию пользователя, то это на клиенте и да, нужно использовать useState (в самом простом варианте реализации без внешних библиотек и стейт менеджмента).

Похоже, вы где-то в серверном компоненте (а они все серверные, если не указано явно use client) пытаетесь обратиться к document (которого на сервере нет). Просто ошибка плохо обрабатывается и не показывает конкретное место.

Примерно так:

{navLinks.map((link) => (
    <Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} />
))}

...
import classNames, { type Argument } from "classnames";

type Props = {
    title: string;
    href: string;
    className: Argument;
}

<Link href={props.href} className={classNames('svgh m-auto', props.className)>
    <SvgMail width="30" height="30" viewBox="0 0 50 50" />
</Link>

https://www.npmjs.com/package/classnames

Нет, проблема не в том, что localStorage не успевает загрузиться. Проблема в том, что код выполняется на сервере, где никакого localStorage вообще нет.
Вам нужно пометить компонент как клиентский и тогда сервер не будет его исполнять.

уверен, есть более лаконичное решение

Нет, магического способа «сделать хорошо» не существует.

а зачем мне это?

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

Next.js is the React framework for the web, enabling you to create full-stack web applications. Built on top of React, it powers some of the largest ecommerce sites in the world, like Walmart, Target, Ebay, Nike, Doordash, and is even used in parts of Amazon.com.

https://vercel.com/guides/building-ecommerce-sites...

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