Иван В

Сейчас чаще всего или CSS in JS, или CSS Modules.
Эти подходы встречаются достаточно часто, чтобы хороший фронт знал оба.

Если использовать laravel + react + sanctum то для seo плохо.

Верно, так как React это CSR.

Ещё есть firebase как я понял это замена для backenda

Тоже верно. Но лучше заранее рассчитайте сколько это может стоить.

next.js это — бесплатный и открытый JavaScript фреймворк, созданный поверх React.js для создания SSR приложений.

Да.

Next js это не аналог laravel?

Нет, Laravel - PHP-фреймворк для бэка, про Next js написано выше (это фреймворк для React для создания SSR).

Из вопроса не совсем понятно, что именно вы хотите сделать. SPA можно делать по разному.
Если заказчику не принципиально SEO, то можно обойтись и просто React.

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

Если картина лежит в "/components/Users/img/johnson.jpg" и вы хотите прописать к ней путь в компоненте Users, то напишите так

import johnsonImg from "./img/johnson.jpg"
...
<img src={johnsonImg} />

P.S. Нельзя заглянуть в содержимое src просто указав ссылку типа localhost:3000/src/components/foo/bar/example.file
Если нужны файлы с доступом по прямой ссылке, кладите их в папку "public".

Задача по описанию не кажется какой-то космической, но, возможно, мы не знаем всех нюансов.
Как бы там ни было, прежде чем говорить, что ты что-то можешь или нет сначала проверни такой алгоритм:

1. Составь план работы.
Очень примерно:
1) Поднять новый проект на Next js
2) Перенести страницы со старого проекта
...
n) Задеплоить новый проект

2. Выбери из списка что тебе вообще непонятно как делать и начинай гуглить, задавать вопросы на qna и, главное, сделай что-то на практике.

3. Если после пункта 2 все еще непоняно, бери все свои нароботки и иди к лиду\старшему разработчику с просьбой помочь (ты джун, это нормально). Главное приходи не с пустыми руками, а хоть с какой-то проделанной работой. Если общаетесь очно, конспектируй.

Если даже после 3-го пункта нет понимания как делать задачу, тогда она для тебя, действительно, слишком сложная.

useEffect(() => {
   refreshProfile()
}, [props.match.params.userId]);

Если значение props.match.params.userId не изменилось, React не запустит useEffect.

const App = ({ inner: { param1, param2 }}) => {  
...
}

В примере вы не прокидываете ничего в Overlay.
Нужно написать так

const AddOrderModal = (props) => {
    return (
      <Overlay modalIsOpen={props.modalIsOpen}>
      .....
        </Overlay>
    );
};

В Main добавляете state, например, "показать-модалку" со значением false по умолчанию.
Также в Main делаете фунцию, например, "switchModal" в которой делаете setState({ "показать-модалку": !this.state."показать-модалку"}). На Button вешаете "switchModal" по клику.

Modal показываете в зависимости от state. Типа
{"показать-модалку" && <Modal />}

В сам Modal передаете props с функцией "switchModal".

Внутри Modal делаете функцию
closeModal = () => { this.props.switchModal() }
Вешаете "closeModal" на элемет по клику на который хотите закрывать Modal.

<p style={{color: this.state.petrol > 0 ? '#ffffff' : '#D12828' }}>{this.state.petrol}l</p>