Обновление сайта: переход на Next.js App Router

12 May , 2023 · views •••

Совсем недавно у Next.js (фреймворка на котором разработан сайт школы) вышла новая версия. В этой версии есть ряд нововведений, которые помогут добавлять новые функции на сайт школы быстрее. Если ваша работа связана с разработкой на Next.js, то вам будет интересно узнать об особенностях этой версии.

App Router

Это новый роутер, который позволяет минимизировать размер JS бандла за счет использования Server Components. Server Component - это такой компонент в React, которые не имеет каких-то динамических функций и не инициализируется на клиенте. Это позволяет грузиться сайту быстрее - меньше JavaScript на клиенте, только HTML.

Помимо уменьшение размера загружаемого на клиент кода, также стало возможно загружать данные для Server Components непосредственно в самом компоненте. Это невероятно удобно во время разработки. Раньше приходилось все props прокидывать непосредственно с основной страницы из getStaticProps. Если нужно было перенести компонент, который использовал данные с сервера на другую страницу, то приходилось и переносить запрос данных из getStaticProps. Сейчас же достаточно перенести просто компонент на другую страницу ведь данные подтягиваются неподсредственно в нем.

Если вы сделаете несколько одинаковых запросов из разных Server Components, которые используют одни и те же данные, то Next.js закеширует их. Это позволяет фреймворку быстрее рендерить страницы. Вы можете указать Next.js, что компоненты необходимо перегенерировать раз в какое-то определенное время директивой revalidate.

fetch('https://...', { next: { revalidate: 60 } });

В дополнение к Server Components существуют Client Components. Это уже динамические компоненты, которые инициализируются на клиенте. В отличии от Pages Router, App Router инициализирует не всю страницу, а только Client Components. Это позволяет загружаться странице быстрее - ведь каждый Client Component инициализируется отдельно.

Новый способ работать с Meta тегами

В App Router появилось два способа добавлять метатеги. Для статичный страниц можно использовать константу metadata на странице и она переварится в метатеги.

export const metadata = {
  title: "Next.js",
  description: "An article about new App Router",
};

Если же необходимо на лету генерировать medatada, то есть generateMetadata. Достаточно подтянуть данные с сервера и добавить их в функцию.

export async function generateMetadata({ params }) {
  const { title, description } = await getData(params.slug);

  return {
    title,
    description,
  };
}

Генерация Twitter карт, иконки сайта и мета тегов на лету

Кажется, что этот функционал должен быть по умолчанию в каждом Frontend фреймворке. Новый App Router умеет самостоятельно добавлять нужные мета теги на страницу сайта. Все, что вам нужно - это добавить файлы twitter-image.js и icon.js в корень app директории.

Например, иконка сайта школы генерируется вот так:

import { ImageResponse } from "next/server";

export const size = {
  width: 32,
  height: 32,
};
export const contentType = "image/png";
export const runtime = "edge";

export default function icon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
          borderRadius: 5,
        }}
      >
        🎓
      </div>
    ),
    size
  );
}

Благодаря этому фунционалу по генерации изображений на сайте генерятся красивые превьюшки к ссылкам.

Server Actions

Одна из самых впечатляющих функций, которые я увидел в этом релизе. Если вы когда-нибудь писали код на Ruby on Rails или другом подобном фреймворке, то должны знать, что требуется сделать, чтобы оживить форму.

Создать Controller
Создать Action
Прописать Route
Создать HTML самой формы
Добавить ссылку на Action к форме

В Next.js вам достаточно создать функцию, в которой будет указано, что ее необходимо выполнить на сервере.

import { cookies } from 'next/headers';
 
export default function AddToCart({ productId }) {
  async function addItem(data) {
    'use server';
 
    const cartId = cookies().get('cartId')?.value;
    await saveToDb({ cartId, data });
  }
 
  return (
    <form action={addItem}>
      <button type="submit">Add to Cart</button>
    </form>
  );
}

Это позволяет не писать отдельное API, которое имеет доступ к вашим секретным ключам до Postgres или Headless CMS (Strapi, Supabase). Вы создаете функцию и прописываете в ней "use server". Этого достаточно, чтобы она выполнилась на сервере. Не нужно думать о роутинге и проблемах с безопасностью.

Саммари

Next.js стабильно развивается имплементируя фичи, которые добавляет команда React.js. С каждым новым релизом удобство разработки повышается. Качество документации к новому функционала остается на высоком уровне. Радует, что Next.js остается фреймворком, который независит от инфраструктуры Vercel спонсирующей его разработку. Вы можете запустить Next.js приложение на любом сервере без использования Serverless платформ, как Vercel.

Liber IT School

Обновление сайта: переход на Next.js App Router

Liber IT School