Next.js

Next.js — открытый JavaScript фреймворк, созданный поверх React.js для создания веб-приложений компанией Vercel (ранее ZEIT). Фреймворк был предназначен для решения проблемы React.js, связанной с отрисовкой приложения на стороне сервера - SSR, также дополняет React.js удобными решениями по навигации (routing) между страницами с помощью файлового подхода (file-system based router). Работает на сервере и в браузере.
Был создан 25 октября 2016 года компанией Vercel (ранее ZEIT).
Server Side Rendering
Server Side Rendering[1] (сокращенно SSR) — принцип веб-приложений, используемый Next.js, переводится с английского языка как «Отрисовка (Рендеринг) на стороне сервера». SSR Рендеринг помогает снизить нагрузку на устройство, которое использует приложение (например на сайте в браузере), ведь большинство операций производимых в приложении, относящиеся к его отображению, происходит на сервере, а не на устройстве пользователя (телефоне, планшете, компьютере и т.п.).
SEO-оптимизация
SSR также улучшает SEO, так как в обычном подходе, который использует React (подход SPA), все отрисовывается на стороне клиента (устройстве пользователя сайта), поэтому код страниц подгружается когда пользователь заходит на страницу, но робот поисковых систем может только просмотреть изначальный код страницы, ещё не обработанный React. Next.js решает эту проблему.
Оптимизация изображений
Фреймворк Next.js использует специальный компонент <Image> для создания оптимизированных изображений, который является надстройкой над <img> в HTML. Он преобразовывает изображения в современные форматы по типу WebP или AVIF и также уменьшает их размер для более быстрой загрузки страницы.[2]
App Router
App Router - система маршрутизации в Next.js начиная с 13 версии, представленная как альтернатива существовавшему Pages Router. Она основана на использовании каталога app и реализуют автоматизированную файловую маршрутизацию, в которой структура каталогов напрямую определяет URL страницы с использованием специальных файлов (например, page.js, layout.js, loading.js, error.js)[3][4]
В отличии от Pages Router, App Router поддерживает концепцию серверных компонентов React и позволяет переносить часть логики на сервер вместо отправки JavaScript-кода клиенту.
Примечания
- Официальный сайт: https://nextjs.org/
- Плюсы Server Side Rendering: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Ссылки
- ↑ Alex Grigoryan. The Benefits of Server Side Rendering Over Client Side Rendering (англ.). Medium (17 апреля 2017). Дата обращения: 11 июля 2021. Архивировано 2 октября 2021 года.
- ↑ Getting Started: Image Optimization | Next.js (англ.). nextjs.org. Дата обращения: 4 мая 2026.
- ↑ Getting Started: Layouts and Pages | Next.js (англ.). nextjs.org. Дата обращения: 4 мая 2026.
- ↑ Building Your Application: Routing | Next.js (англ.). nextjs.org. Дата обращения: 4 мая 2026.
Литература
- Коншин, К. (2018). Следующий. js Краткое руководство: рендеринг на стороне сервера выполнен правильно . Packt Publishing Ltd.
- Таккар М. Далее. js // Создание приложений React с рендерингом на стороне сервера. — Апресс, Беркли, Калифорния, 2020. — С. 93-137.
- Таккар М. Модульное тестирование с использованием Jest // Создание приложений React с рендерингом на стороне сервера. — Апресс, Беркли, Калифорния, 2020. — С. 153—174.
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.