Вышел Next.js 13. Я могу рассказать вам о некоторых функциях, которые были в Next.js, а также объяснить преимущества каждой из них:
- Корневая папка
В последней версии Next.js структура каталогов была обновлена, чтобы лучше соответствовать соглашениям современных проектов веб-разработки. Одним из изменений является введение каталога «app», который может служить корнем вашего проекта. Добавив каталог «app», вы сможете лучше организовать свой код и воспользоваться другими функциями Next.js, такими как автоматическое разделение кода и создание статического сайта.
Вы можете поместить все свои страницы, компоненты, служебные функции, стили и другие активы в каталог app, и это облегчит разработчикам навигацию по проекту и поиск необходимых файлов. Это изменение также обеспечивает большую гибкость и контроль над структурой вашего проекта.
Кроме того, при использовании Next.js с пользовательским сервером папка app является корневой для сервера. Это обеспечивает более согласованную структуру как на стороне клиента, так и на стороне сервера.
Следует отметить, что эта структура папок является необязательной, и вы все равно можете использовать существующую файловую структуру. Но это может быть хорошим способом организовать ваш код более модульным способом.
2. Улучшено далее/ссылка
В предыдущих версиях Next.js для создания ссылки на другую страницу в вашем приложении вы использовали традиционный HTML-тег <a>. Однако в последней версии Next.js появился новый компонент Link, который обеспечивает более мощный и гибкий способ создания ссылок между страницами в вашем приложении.
Компонент Link — это компонент более высокого порядка (HOC), который является оболочкой для элемента <a> и обеспечивает дополнительные функции, такие как автоматическая обработка навигации на стороне клиента, предварительная загрузка следующей страницы и отслеживание истории навигации с помощью history API браузера.
Вот пример использования компонента Link:
import Link from 'next/link'
export default function Home() {
return (
<div>
<Link href="/about">
Go to About Page
</Link>
</div>
)
}
Как видите, вместо использования тега <a> вы используете компонент Link и передаете реквизит href, который определяет URL-адрес назначения. Затем компонент Link позаботится об управлении навигацией по этому URL-адресу. Кроме того, поскольку компонент Link является HOC, вы можете использовать его для переноса любого элемента, который вы хотите.
Компонент Link делает навигацию более простой и удобной для разработчиков, обрабатывая для вас навигацию на стороне клиента, предварительную загрузку и отслеживание истории. Это также поможет с SEO и производительностью сайта, в некоторых случаях избегая полной перезагрузки страницы.
3. SSR дан клиентский сайт
В Next.js вы можете воспользоваться преимуществами серверного и клиентского компонентов. Серверные компоненты загружаются во время процесса рендеринга на стороне сервера, а клиентские компоненты загружаются во время процесса рендеринга на стороне клиента.
Используя как серверные, так и клиентские компоненты, вы можете оптимизировать время загрузки и производительность вашего приложения. Например, вы можете использовать серверные компоненты для важного и статического контента, который необходимо предварительно отобразить, а клиентские компоненты — для динамического и менее важного контента, который можно загрузить после первоначального рендеринга.
Чтобы использовать клиентский компонент, вы можете использовать хук useClient, который позволяет вам условно отображать компонент только тогда, когда он работает на стороне клиента.
Вот пример использования хука useClient:
"useClient"
function MyComponent() {
return <div>Hello World!</div>;
}
В этом примере MyComponent будет отображаться на стороне клиента только в том случае, если пользователь обращается к странице напрямую. и будет пропущен в процессе рендеринга на стороне сервера. таким образом вы можете повысить производительность своего приложения и снизить нагрузку на сервер.
Стоит отметить, что использование серверных и клиентских компонентов не является обязательным и часто используется для оптимизации производительности и поведения приложения. Вы также можете использовать обычный компонент, который будет использоваться как на стороне сервера, так и на стороне клиента.
4. Турбопак
Производительность каркаса. Он еще недоступен в Next.js 13. Эта функция направлена на повышение производительности приложений Next.js до 700 раз за счет использования собственных модулей ES и других современных функций браузера.
Turbo Pack делает это, используя такие функции, как собственные модули ES и динамический импорт, что обеспечивает более быстрый и эффективный способ загрузки кода JavaScript. Это может привести к ускорению загрузки страниц, повышению производительности и уменьшению размеров пакетов.
Функция Turbo Pack все еще находится в стадии разработки и еще недоступна для использования, но она обещает разработчикам возможность повысить производительность своего приложения Next.js. Стоит отметить, что повышение производительности будет зависеть от конкретного варианта использования и самого приложения, но при использовании этой функции можно увидеть значительные улучшения.
Имейте в виду, что Turbo Pack — это экспериментальная функция, которая еще недоступна в Next.js 13, и эта функция не включена по умолчанию и требует явного согласия. Важно протестировать эту функцию в вашем приложении и проверить результаты, поскольку это все еще экспериментальная функция, поэтому у нее могут быть проблемы с совместимостью или ошибки. Также стоит знать, что некоторые функции могут быть еще несовместимы с Turbo Pack, и при его использовании вы можете столкнуться с некоторыми проблемами или ограничениями.
