Как я изучил Next.js

Обо мне

Я разработчик полного стека и технический энтузиаст. Я влюбился в javascript несколько лет назад, и он стал моим языком по умолчанию для большинства проектов, над которыми я работал. На протяжении многих лет я использовал javascript для работы как на стороне сервера, так и на стороне клиента в проектах с использованием библиотек и фреймворков, таких как react, express js, vue и т. д.

Почему я хотел изучить Next.js

При работе с одностраничными приложениями, такими как приложения для реагирования, вы осознали некоторые проблемы, связанные с рендерингом на стороне клиента.

Во-первых, приложению требуется больше времени, чтобы стать видимым для пользователя, потому что перед загрузкой контента должен загрузиться весь JavaScript, и ваше приложение должно быть запущено, чтобы определить, что показывать на странице.

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

Чтобы решить эту проблему, нам нужно найти способ серверного рендеринга приложения. Таким образом, причина в следующем.js, который является платформой реагирования для серверных приложений.

Как я подошел к изучению Next.js

Так как Next.js — относительно новая технология, самым простым способом изучения основ для меня было пройти через Документация NextJS и официальный учебник на nextjs.org/learn

Официальный учебник очень хорошо обучает основам next.js, используя фактические коды, которые учащийся может кодировать вместе с ним.

Проблемы, с которыми я столкнулся

Исходя из фона React. Я был удивлен, увидев, что большая часть тяжелой работы, такой как маршрутизация и разделение кода, уже выполняется из коробки Next Js. Мне просто нужно было прийти к осознанию того, что не всегда нужно делать все трудным путем.

Основные выводы

Настраивать

Настроить приложение Next Js очень просто. Все, что вам нужно сделать, это:

бежать npm install --save react react-dom next
добавьте следующее в ваш package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Создайте каталог страницы в корне и добавьте файл index.js, и все готово.

Маршрутизация

Next Js уже заботится о маршрутизации. Все, что вам нужно сделать, это продолжать добавлять маршруты в виде страниц в каталог pages.
Например: Чтобы создать about pageмне просто нужно создать файл about.js в каталоге pages, а затем перейти к localhost:3000/about

Страницы ошибок

Next Js уже обрабатывает страницы ошибок для нас, но если нам нужна пользовательская страница ошибок, мы можем создать _error.js файл в каталоге страницы, чтобы создать нашу пользовательскую ошибку.

Головной компонент

Next.js предоставляет нам компонент Head, который мы можем использовать для управления тем, что находится внутри HTML-тега. Например, мы можем захотеть добавить больше метаинформации.

import Head from 'next/head'

export default () => (
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <p>Hello world!</p>
  </div>
)

Советы и советы

Next Js поставляется с множеством функций, которые делают рендеринг реагирующих приложений на стороне сервера действительно простым. Эти функции включают перезагрузку горячего кода, автоматическую маршрутизацию, автоматическое разделение кода.
Предварительная загрузка и т. д.

Единственный способ увидеть эти функции в действии — создать приложение Next Js. Так что, пока вы просматриваете руководства и документы, вам нужно на самом деле запачкать руки, создавая простые проекты, чтобы лучше понять их.

Заключительные мысли и следующие шаги

Я не могу описать все функции этого великолепного фреймворка, но я советую всем, кто заинтересован в обучении, просто заглянуть в файл readme проекта на GitHub.

Теперь Next Js стал моим фреймворком по умолчанию для создания реагирующих приложений.

Как я изучил Next.js |

Обо мне

Почему я хотел изучить Next.js

Как я подошел к изучению Next.js

Проблемы, с которыми я столкнулся