Начало работы с NextJS

Начало работы с NextJS

Работа с React – это отличный опыт, но он может быть довольно сложным для начинающих разработчиков, не знакомых со сложностями инфраструктуры, маршрутизацией на стороне клиента, макетом страницы и так далее. К счастью, существует несколько решений, которые значительно упрощают создание одностраничных приложений, и было бы стыдно не использовать их в своих интересах.

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

Что такое NextJS?

NextJS – это одна из платформ для серверного рендеринга React с нулевой конфигурацией. По сути, NextJS способен помочь вам с легкостью создать приложение React и выполнить для вас рендеринг на стороне сервера.

Особенности/преимущества NextJS

Теперь давайте подведем итоги функций NextJS, которые вы можете ожидать от фреймворка:

  • Серверный рендеринг по умолчанию
  • Простая клиентская маршрутизация на основе страниц
  • Автоматическое разделение кода для более быстрой загрузки страницы
  • Среда разработки на основе веб-пакетов (поддерживающая  Hot Module Replacement)
  • Реализация с Express или любым другим HTTP-сервером NodeJS
  • Настраивается с помощью конфигураций Babel и Webpack
  • Отдельные файловые компоненты с использованием styled-jsx
  • Предварительная загрузка благодаря компоненту Link, который поддерживает функцию prepetch, которая автоматически выполняет предварительную загрузку ресурсов страницы.
  • Динамические компоненты: возможность динамического импорта модулей JavaScript и компонентов React
  • Статический экспорт: с помощью next export вы можете экспортировать полностью статический сайт из вашего приложения.

NextJS против React против Create-React-App против Gatsby против Express

Прежде всего, NextJS – это фреймворк React. React – это библиотека для создания пользовательских интерфейсов. NextJS использует React, фреймворк для рендеринг-приложений сервера. NextJS выполняет рендеринг приложений React на сервере (SSR). Два не могут быть действительно сравнимы, потому что NextJS «обертывает» React, и они в основном работают вместе.

Create React App (CRA) – это технология рендеринга на стороне клиента, которая не является идеальным вариантом, если вы заботитесь о SEO своего веб-сайта; Gatsby – это технология создания статических сайтов, которая создает статические страницы веб-сайта и передает их в браузер. NextJS – это технология рендеринга на стороне сервера. ExpressJS – это инфраструктура веб-приложений NodeJS для создания одно-, многостраничных и гибридных веб-приложений.

Начало работы с NextJS

Для этого простого руководства мы будем использовать репозиторий NextJS Github и инструкции с официального сайта NextJS.

Сначала создайте папку, в которой вы будете хранить свой первый проект NextJS. Откройте папку в редакторе по вашему выбору. Мы будем использовать Sublime. Затем откройте командную строку и введите переменную к этой папке, а затем npm init.

Нажмите Enter несколько раз, пока не увидите «Is this Okay? (yes)» с указанием переменной к вашей папке NextJS. Мы только что создали package.json в этой папке.

Теперь, следуя инструкциям репозитория NextJS GitHub, введите npm install –save next react react-dom, чтобы установить NextJS в свой проект.

Таким образом, мы установили NextJS, React и ReactDOM для работы с объектной моделью документа (Document Object Model).

Во время или сразу после установки создайте новую папку внутри существующей папки в Sublime и назовите ее «pages», здесь мы будем хранить страницы, которые мы создадим во время этого крошечного «ускоренного курса NextJS». Чтобы создать сценарий ввода, создайте файл с именем «index.js» в новой папке «pages».

Внутри файла «index.js» создайте простой функциональный компонент React, например:

export default () => (
  <div>
    <p>My first page with NextJS</p>
  </div>
)

Другой способ сделать это – создать переменную:

const  Index = () =>  (
  <div>
    <p>My first page with NextJS</p>
  </div>
);
export default Index;

Теперь пора добавить скрипт в файл package.json, добавив следующий код вместо существующего скрипта по умолчанию:

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

Так как у нас есть новый скрипт с именем «dev», давайте вызовем его в командной строке, набрав npm run dev.

Теперь, если вы посетите localhost: 3000, вы увидите, что компонент, который мы создали ранее в «index.js», отображается автоматически.

Создайте вторую страницу под названием «contacts.js» в папке «pages» и введите:

const  Contacts= () =>  (
  <div>
    <p><a href="mailto:vorontsova_mi@soshace.com">Contact me!</a></p>
  </div>
);
export default Contacts;

Теперь посетите localhost:3000/contacts. То, что вы увидите – это ваша вторая страница. Именно из-за «горячей перезагрузки» вам не нужно перезапускать процесс npm, NextJS делает это автоматически для вас.

NextJS также поставляется с модулем Link для навигации к вашим файловым базам или маршрутам на базе страниц, все что вам нужно сделать, это импортировать их с

Import Link from ‘next/link’

И тогда вы можете использовать его следующим образом:

<Link href=”/”><a>Main page</a></Link>
<Link href=”/contacts”><button>Contacts</button></Link>

Для навигации по страницам мы будем использовать модуль Link, описанный выше.

Для этого введите в файлах ‘index.js” и “contacts.js” следующую строку прямо над вашим кодом, затем укажите код ссылки href и страницы, на которые вы хотите сослаться, вот так:

import Link from ‘next/link’
const  Index = () =>  (
  <div>
    <ul>
      <li><Link href=”/”><a>Main page</a></Link></li>
      <li><Link href=”/contacts”><a>Contacts</a></Link></li>
    </ul>
    <p>My first page with NextJS</p>
  </div>
);
export default Index;

И

import Link from ‘next/link’
const  Contacts= () =>  (
  <div>
    <ul>
      <li><Link href=”/”><a>Main page</a></Link></li>
      <li><Link href=”/contacts”><a>Contacts</a></Link></li>
    </ul>
    <p><a href="mailto:vorontsova_mi@soshace.com">Contact me!</a></p>
</div>
);
export default Contacts;

В противном случае вы можете создать компонент navbar, чтобы не повторять себя и аккуратно организовать свой код. Чтобы создать отдельный компонент панели навигации, сначала необходимо создать папку «компоненты» в корневой папке, в нашем случае это папка «reactnext». В папке «компоненты» создайте отдельный файл с именем «navbar.js».

В «navbar.js» напишите следующее:

import Link from ‘next/link’
const  Navbar = () =>  (
  <div>
    <ul>
      <li><Link href=”/”><a>Main page</a></Link></li>
      <li><Link href=”/contacts”><a>Contacts</a></Link></li>
    </ul>
  </div>
);
export default Navbar;

Так что теперь вместо добавления модуля Link на предыдущих страницах, «index.js» и «contacts.js», мы можем вместо этого ввести Navbar следующим образом:

import Navbar from ‘../components/Navbar’;
const  Index = () =>  (
  <div>
    <Navbar/>
    <p>My first page with NextJS</p>
  </div>
);
export default Index;

Сделайте то же самое для страницы контактов:

import Navbar from ‘../components/Navbar’;
const  Contacts= () =>  (
  <div>
    <Navbar />
    <p><a href="mailto:vorontsova_mi@soshace.com">Contact me!</a></p>
  </div>
);
export default Contacts;

Теперь давайте посмотрим, как работает styled-jsx и как добавить bootstrap в ваше приложение NextJS.

Чтобы добавить стили внутри ваших компонентов, используйте <style jsx> {} </ style>, где внутри обратных кавычек в фигурных скобках вы можете добавить обычный CSS, например, так:

import Link from ‘next/link’
const  Navbar = () =>  (
  <div>
    <ul>
      <li><Link href=”/”><a>Main page</a></Link></li>
      <li><Link href=”/contacts”><a>Contacts</a></Link></li>
    </ul>
    <style jsx>{`
      ul {
        background: #333;
        color: #fff;
        list-style: none;
        display: flex;
      }
      ul  li {
        font-size: 18px;
        margin-right: 20px;
      }
      ul  li a {
        color: #fff;
        text-decoration: none;
      }
    `}</style>
  </div>
);
export default Navbar;

Чтобы избавиться от панели навигации на каждой отдельной странице, где вы хотели бы видеть свою панель навигации, вы можете создать компонент макета внутри папки «компоненты».

Внутри вашего только что созданного файла «Layout.js» введите:

import Navbar from ‘./Navbar’;

const  Layout= (props) =>  (
  <div>
  <Navbar />
    {props.children}
  </div>
);
export default Layout;

Теперь внутри ваших файлов «index.js» и «contacts.js» вам нужно будет импортировать компонент следующим образом:

import Layout from ‘../components/Layout’;

const  Index = () =>  (
    <Layout>
      <div>
        <p>My first page with NextJS</p>
      </div>
    <Layout/>
);
export default Index;

Сделайте то же самое для страницы контактов:

import Layout from ‘../components/Layout;
const  Contacts= () =>  (
    <Layout>
      <div>
        <p><a href="mailto:vorontsova_mi@soshace.com">Contact me!</a></p>
      </div>
    </Layout>
);
export default Contacts;

Теперь, предположим, что вы хотите иметь заголовок страницы, вы хотите добавить Bootstrap вместо менее симпатичного стиля jsx. Для этого вам нужно импортировать Head из «next/head» в вашем компоненте Layout, а также добавить ссылку на тему Bootstrap, которую вы хотите импортировать. Для целей данного руководства мы возьмем тему с https://bootswatch.com/ под названием «Cosmo». Щелкните правой кнопкой мыши на Download, откройте новую вкладку и скопируйте ссылку из панели поиска, которая должна выглядеть примерно так: https://bootswatch.com/4/cosmo/bootstrap.min.css

Теперь давайте посмотрим, как это будет выглядеть в коде:

import Head from ‘next/head;
import Navbar from ‘./Navbar’;
const  Layout= (props) =>  (
  <div>
    <Head>
      <title>My first NextJS project</title>
      <link rel=”stylesheet” href=”https://bootswatch.com/4/cosmo/bootstrap.min.css” />
     </Head>
     <Navbar />
      {props.children}
  </div>
);
export default Layout;

Таким образом, ваша тема Bootstrap будет применяться для каждой страницы. Если вы хотите интегрировать Bootstrap только на одну страницу, а не на весь сайт, просто вставьте ссылку Bootstrap в компонент, который вы хотите стилизовать.

Теперь давайте создадим динамические страницы. Динамические страницы – это страницы, которые вместо фиксированного содержимого отображают некоторые данные на основе некоторых параметров. Чтобы увидеть, как это работает, давайте создадим очень простой базовый блог. Нам нужно изменить файл «index.js» следующим образом:

import Layout from ‘../components/Layout’;
const Post = props => (
  <Layout>
    <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)
<Layout/>
);
export default () => (
  <div>
    <h2>My blog</h2>
    <ul>
      <li>
        <Post title="First post" />
        <Post title="Second post" />
        <Post title="Third post" />
      </li>
    </ul>
  </div>
)

Теперь создайте еще один файл в папке страниц и назовите его «post.js.». Внутри типа «post.js»:

export default props => <h1>{props.url.query.title}</h1>

Теперь, когда вы нажмете на любую из своих публикаций в блоге на странице индекса (главной странице), вы будете перенаправлены на страницу, которая отображает тег h1 – название. Вот так:

 Начало работы с NextJS

Теперь давайте посмотрим, как можно экспортировать созданное вами приложение NextJS как статический веб-сайт. Вы можете сделать это, используя супербыстрые статические хосты, такие как Netlify или Firebase Hosting. Вы должны будете объявить URL-адреса, составляющие сайт, чтобы узнать больше о процессе и перейти к репозиторию NextJS GitHub для подробного объяснения.

Чтобы развернуть готовую производственную копию типа приложения в командной строке:

npm run build, а затем npm run start

Вы можете интегрировать другое приложение той же компании под названием Now, которое является сервисом хостинга для приложений Node.js, которые вы можете использовать для развертывания приложений NextJS. Все, что вам нужно – это установить Now и запустить команду now в папке приложения. Теперь вы можете настроить все, включая сервер. Осталось дождаться, когда URL вашего приложения будет готов.

ВОПРОСЫ-ОТВЕТЫ:

NextJS: как добавить Bootstrap?

Мы уже описывали процесс ранее с помощью интеграции темы с bootswatch. Полученный код выглядел следующим образом:

import Head from ‘next/head;
import Navbar from ‘./Navbar’;
const  Layout= (props) =>  (
  <div>
    <Head>
      <title>My first NextJS project</title>
      <link rel=”stylesheet” href=”https://bootswatch.com/4/cosmo/bootstrap.min.css” />
     </Head>
     <Navbar />
      {props.children}
  </div>
);
export default Layout;

Как запустить NextJS-React на двух портах в Windows?

Если вам нужно создать отдельный сервер, но поместить его в тот же проект, что и Next.js, это можно сделать стандартным способом, добавив отдельный js-файл в корневой каталог с настройкой порта, отличного от 3000. Например, 3001.

Как перейти с create-react-app на NextJS?

Наиболее существенным отличием между create-react-app и проектом next.js является система маршрутизации, поскольку Next.js создает разные пакеты для каждого базового адреса. Для каждого маршрута в папке страницы создается отдельный файл. Таким образом, вам нужно использовать следующий компонент /Link вместо react-router-dom. Также имейте в виду, что для статических файлов используется папка /static, а не /public, и пакеты находятся в папке .next

Как добавить Angular в NextJS?

Next.js – это платформа React для SSR. Есть Angular Universal для SSR с Angular.

Как использовать NextJS на Netlify?

Netlify предлагает бессерверные бэкэнд сервисы для статических веб-сайтов. Next.js может вести себя как серверное приложение, но без сервера Node.js.

package.json
{
  "scripts": {
    "build: "next build",
    "export": "next export",
    "deploy": "npm run build && npm run export"
  }
}

После команды «npm run export» Next.js сгенерирует каждую страницу и подстраницу как статическое приложение. С Netlify вы можете выбрать ветку, где вы хотели бы наблюдать за изменениями. Netlify будет копировать каждую новую версию после фиксации, а затем вы можете дать команду, которая позаботится о процессе сборки. Мы можем использовать «npm run deploy» в качестве команды сборки.

Как сделать приложение автономным, способным использовать NextJS?

Есть две важные вещи, которые нужно настроить, во-первых, нам нужен next-offline, чтобы обернуть вашу следующую конфигурацию.

Если вы еще этого не сделали, создайте файл next.config.js в своем проекте.

// next.config.js
const withOffline = require('next-offline')

const nextConfig = {
  ...
}

module.exports = withOffline(nextConfig)

Далее, мы должны убедиться, что наше приложение правильно обслуживает сервисного работника, эта настройка зависит от того, как вы размещаете свое приложение. Ниже приведена документация.

Как просмотреть localhost с NextJS?

По умолчанию localhost: 3000

Папка для статических файлов – статическая. Файлы из этой папки будут доступны напрямую:

/static/file.txt

localhost:3000/static/file.txt

Nextjs: куда мне добавить внешнюю ссылку?

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

Как добавить изображения в NextJS?

Изображения и другие статические файлы (css, js, шрифты) могут быть помещены в статическую папку и будут доступны напрямую:

Переменная файловой системы /static/img.jpg

URL: /static/img.jpg

Как обращаться с сервером данных и клиентской стороной NextJS?

Есть два варианта.

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


.

  • January 2, 2020