Как использовать FSD + Next.js | Подключаем Material UI и Настраиваем SSR
В этой статье мы расскажем вам, как использовать FSD (Full Stack Development) с Next.js. Мы также подключим Material UI и настроим SSR (Server-Side Rendering).
Шаг 1: Установка Next.js
Для начала установите Next.js, если у вас его еще нет. Для этого выполните команду:
npm install next react react-dom
Шаг 2: Создание компонента с Material UI
Теперь создайте компонент с Material UI. Для этого установите Material UI:
npm install @mui/material @emotion/react @emotion/styled
Затем создайте свой компонент, например Button:
import React from 'react';
import Button from '@mui/material/Button';
const MyButton = () => {
return (
);
}
export default MyButton;
Шаг 3: Настройка SSR с Next.js
Для настройки SSR с Next.js создайте файл _app.js в папке pages. В этом файле вы можете настроить SSR, добавив нужные настройки и компоненты.
Например, вы можете использовать getInitialProps для получения данных перед рендерингом страницы:
import React from 'react';
import fetch from 'isomorphic-unfetch';
const Index = ({ data }) => {
return (
{data.title}
{data.body}
);
}
Index.getInitialProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await res.json();
return { data };
}
export default Index;
Это всё! Теперь у вас есть готовое приложение с использованием FSD, Next.js, Material UI и SSR.
2:25 Начало стрима
12:40 Создание проекта
22:01 Что такое fsd, создаем необходимые папки
41:00 Начинаем писать код
в конце ты говоришь про 6 экшенов, которые RTK Query запускает. Можешь рассказать, что за экшены?
Где репозиторий?
Я бы может и посмотрел, но с таким звуком меня хватило на 5 минут
Купи пожалуйста микрофон, стрим офигенный, но звук и вправду ужасен😢
Вим для разработки может быть и удобен, но с точки зрения просмотра это просто ужас, вообще непонятно где что открыто, если никогда им не пользовался)
Крутое начало серии! Еще не смотрел, но лайк не глядя за FSD.
Офигенный стрим, по картинке и контенту все замечательно. Очень нравятся твои уроки, посмотрел все видосы. В тоже время звук на стриме не крутой, хотелось бы такого же качества как в видео. Оч жду свежих роликов в стримов
Ужасное качество звука!
Круто, жаль не смог посмотреть в реальном времени.