Введение:
В этом руководстве мы создадим приложение для блога, используя React Query и Next.js. React Query — это мощная библиотека управления состоянием, которая упрощает выборку и кэширование данных, а Next.js обеспечивает рендеринг на стороне сервера и отличный опыт разработки. Объединив эти две технологии, мы можем создать производительное и эффективное приложение для блога, которое без проблем извлекает и отображает сообщения блога.
Предпосылки:
Чтобы следовать этому руководству, вы должны иметь базовое представление о React и Next.js. Также полезно иметь некоторые знания об API и асинхронной выборке данных с помощью Axios.
Шаг 1. Настройте новый проект Next.js
Начните с создания нового проекта Next.js с помощью следующей команды:
```
npx создать-следующее-приложение реагировать-запрос-блог
cd реагировать-запрос-блог
```
Шаг 2: Установите зависимости
Затем установите React Query и Axios, выполнив следующую команду:
```
npm установить аксиомы с ответным запросом
```
Шаг 3: Создайте собственный клиент React Query
В папке `lib` создайте новый файл с именем `react-query-client.js` со следующим содержимым:
```javascript
// библиотека/реакция-запрос-клиент.js
импортировать {QueryClient, QueryClientProvider} из «ответного запроса»;
const queryClient = новый QueryClient();
функция экспорта ReactQueryProvider ({ дочерние элементы }) {
. вернуть ‹QueryClientProvider client={queryClient}›{children}‹/QueryClientProvider›;
}
```
Шаг 4. Настройте поставщика запросов React в `_app.js`
Откройте файл «_app.js», расположенный в папке «pages», и импортируйте «ReactQueryProvider» из файла «react-query-client.js». Оберните «Компонент» с «ReactQueryProvider», чтобы предоставить доступ к клиенту React Query на всех страницах:
```javascript
// страницы/_app.js
импортировать {ReactQueryProvider} из ‘../lib/react-query-client’;
функция MyApp({Компонент, pageProps}) {
. возвращаться (
. ‹ReactQueryProvider›
. ‹Компонент {…pageProps} /›
. ‹/ReactQueryProvider›
. );
}
экспорт MyApp по умолчанию;
```
Шаг 5: Создайте компонент блога и получите данные с помощью React Query
В папке «components» создайте новый файл с именем «Blog.js». Этот компонент будет отвечать за получение и отображение сообщений в блоге:
```javascript
// компоненты/Blog.js
импортировать { useQuery } из «ответного запроса»;
импортировать аксиомы из «аксиос»;
функция Блог() {
. const { data, isLoading, error } = useQuery('blogPosts', () =›
. axios.get('https://jsonplaceholder.typicode.com/posts')
. );
. если (загружается) {
. return ‹div›Загрузка…‹/div›;
. }
. если (ошибка) {
. вернуть ‹div›Ошибка: {error.message}‹/div›;
. }
. возвращаться (
. ‹див›
. ‹h1›Сообщения в блоге‹/h1›
. {data.map((сообщение) =› (
. ‹ключ div={post.id}›
. ‹h2›{post.title}‹/h2›
. ‹p›{post.body}‹/p›
. ‹/дел›
. ))}
. ‹/дел›
. );
}
экспортировать блог по умолчанию;
```
Шаг 6: Создайте домашнюю страницу с помощью компонента блога
В папке «pages» создайте новый файл с именем «index.js». Этот файл будет представлять домашнюю страницу приложения блога и отображать компонент «Блог»:
```javascript
// страницы/index.js
импортировать Блог из ‘../components/Blog’;
функция Домашняя страница () {
. вернуться ‹Блог /›;
}
экспорт домашней страницы по умолчанию;
```
Шаг 7: Запустите сервер разработки
Теперь выполните следующую команду в своем терминале, чтобы запустить сервер разработки:
``` ударить
нпм запустить разработчик
```
Посетите `http://localhost:3000` в своем браузере, и вы должны увидеть домашнюю страницу, отображающую сообщения блога, полученные с помощью React Query.
Заключение:
В этом руководстве мы узнали, как создать приложение для блога с помощью React Query и Next.js. React Query упрощает выборку и кэширование данных, позволяя нам создавать плавный и эффективный пользовательский интерфейс. Next.js предоставляет возможности рендеринга на стороне сервера, которые улучшают SEO и сокращают время начальной загрузки страницы. Объединив эти технологии, мы создали мощное приложение для блога, которое эффективно извлекает и отображает сообщения блога. Вы можете расширить это приложение, добавив такие функции, как нумерация страниц, поиск или аутентификация пользователя. Удачного кодирования!
