Введение в Next.js — личное мнение

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

Что в этой статье

  • Что такое Next.js
  • Некоторые личные любимые особенности Next.js
  • Выбор Next.js в сравнении с React

Чего нет в этой статье

  • Как начать проект на Next.js

Если вы хотите создать только очень простой информационный сайт, то изучения HTML и CSS будет вполне достаточно. Но если вы хотите добавить на этот сайт какую-то функциональность, вам может понадобиться и JavaScript. Любой сайт, независимо от его сложности, почти всегда можно упростить до HTML, CSS и JS кода.

Но что если вы хотите создать не простой, а несколько сложный сайт или веб-приложение? Вот тут-то и пригодятся такие библиотеки для веб-разработки, как React.js, и такие фреймворки, как Next.js, Vue.js и Angular.

Next.js можно рассматривать как фреймворк веб-разработки полного стека, поскольку он позволяет разработчику писать код для frontend и backend в одном приложении. Код фронтенда, конечно же, пишется на React с использованием JavaScript или TypeScript. (Хотя мне лично больше нравится TypeScript — я расскажу вам почему в одной из следующих статей).

Один из основных вопросов, который мне задают, это,

«Нужно ли мне изучать React, чтобы начать изучать Next.js?».

Я отвечаю на этот вопрос следующим образом,

«Не думайте о Next.js как о полностью изолированной от React вещи, просто думайте о нем как о дополнительном слое помощи, предоставляемой разработчиками Next.js разработчикам React, потому что под капотом Next.js — это React!».

Посмотрите следующие фрагменты кода.

Hello World в React,

//src/App.jsx
import './App.css';

function App() {
 return (
   <div >
     Hello World
   </div>
 );
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Hello World в Next.js,

//pages/_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
 return <div>Hello World</div>;
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Видите, очень похоже. Это потому, что Next.js делает то, что он заботится о некоторых мирских, но распространенных задачах, которые необходимо выполнить во время разработки приложения React.

Например, разработчики, использующие React, знают, как тяжело работать с маршрутами. Если имя маршрута меняется, например, с auth/login на /login (среди множества запросов реальных клиентов 😆), то разработчику React приходится вручную менять маршрут в коде. Но разработчику Next.js достаточно изменить структуру папок внутри папки pages. (Кстати, эта папка зарезервирована Next.js для маршрутизации).

Особенности Next.js, которые мне нравятся

  • Маршрутизация на основе страниц позволяет легко управлять маршрутизацией в веб-приложении и поддерживает динамические маршруты, которые позволяют легко работать с параметрами запроса и т.д. Если, например, у вас есть маршрут типа projects/[projectId], получить этот projectId для отображения содержимого одного проекта очень просто.

  • Горячая перезагрузка кода, которая позволяет видеть изменения, обновленные при сохранении файла кода, без перезагрузки сервера.

  • Легкое развертывание на различных платформах, таких как Vercel (предложенный создателями Next.js) и Netlify.

  • Отличная документация, очень удобная для новичков (но я так и не смог заставить работать Server-side-rendering, прочитав ее).

Что мне не нравится в Next.js

  • Некоторые сторонние пакеты, которые импортируют глобальный css, выдают ошибку. Например, https://github.com/uiwjs/react-md-editor/issues/52#issue-724437226. Есть обходные пути, но это неудобство.

  • Иногда dev-версия веб-приложения слишком медленно работает в браузере. После сборки продакшн-релиза проблем нет.

Заключение

Итак, прощай React! Здравствуй Next.js? Не так быстро 😄! Хотя Next.js является очень хорошим фреймворком для средних и сложных проектов, для очень простых проектов стоит подумать об использовании обычного React. (Если это еще проще, просто используйте HTML, CSS и JS).

И последнее замечание — если это достаточно сложный клиентский проект, я почти всегда спрашиваю клиента, можно ли использовать Next.js или они хотят чистый React. Если у них нет предпочтений, я всегда выбираю Next.js, потому что почему бы и нет!

Но не забывайте о старых добрых HTML, CSS, JS, потому что не все проекты требуют React или Next.js. Кто сказал, что вы должны использовать React для всего, верно? Если вы хотите взглянуть на самый перегруженный и безумно сложный способ написания веб-приложения hello world, посмотрите видео Криса Хокса — https://youtu.be/3nHQMAY_J1A, конечно, после того, как поставите мне лайк, если считаете, что я заслуживаю его за эту статью 😃.

Я тоже учусь этому делу, так что дайте мне знать, если я что-то упустил в комментариях ниже. Спасибо и удачного дня 🥳!

Ссылки

Меня вдохновила эта статья, пожалуйста, посмотрите и ее. — https://dev.to/olenadrugalya/introduction-to-nextjs-3gi4

Оцените статью
devanswers.ru
Добавить комментарий