Next.js - это фреймворк / шаблон / инструмент от Zeit, который позволяет быстро и относительно неопытно создавать прогрессивные веб-приложения (PWA) с рендерингом на стороне сервера. Поскольку это неуместно, может показаться, что с самого начала объяснений недостаточно, но отсутствие абстракции дает возможность персонализировать систему в соответствии с вашим предпочтительным методом. Next полагается на React, Webpack, Babel, ES6 и множество других вещей, чтобы упростить сборку и развертывание PWA.

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

На многие проблемы, поднятые разработчиками в отношении Next.js, ответ никогда не будет «вы не можете этого сделать», а скорее «есть несколько способов справиться с этим».

Ресурсы:

Https://github.com/zeit/next.js
https://zeit.co/blog/next

Учебная часть статьи:

В первой статье из серии Next.js я рассмотрю введение в Next и базовую настройку приложения Next. Если вы полностью поняли и прошли обучение Zeit, то, вероятно, можете пропустить эту первую статью и перейти ко второй.

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

Шаг 1. Настройте структуру и установите затем

(Этот шаг предполагает, что у вас уже установлены Node и NPM)

Во-первых, создайте новую папку и внутри нее создайте следующую структуру и файлы:

/
   package.json
   /pages
      index.js
   /components
      header.js
      footer.js
   /styles
      styles.js
   /static

Сделайте так, чтобы внутри файла package.json он выглядел так:

{
  “name”: “next-tutorial”,
  “scripts”: {
    “dev”: “next”,
    “build”: “next build”,
    “start”: “next start”,
    “deploy”: “now”
  },
  “dependencies”: {
    “next”: “latest”
  }
}

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

npm install

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

npm install now

Шаг 2: заполнение наших файлов

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

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

index.js

import React from 'react'
import Head from 'next/head'
import Header from '../components/header'
import Footer from '../components/footer'
//import specific styles from the style.js file
import { somestyles, otherstyles } from '../styles/styles'
export default class extends React.Component {
  static async getInitialProps () {
 //code will go here to get data
  }
  constructor (props) {
     super(props)
  }
  render() {
    return (
      <div className={ somestyles }>
        <Head>
          <title>Next -- {`will insert page title here`}</title>
        </Head>
        <Header>Page Title</Header>
        <div className={ otherstyles }>
          <h2>A Header</h2>
          <p>Some text for my page</p>
        </div>
        <Footer />
      </div>
    )
  }
}

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

Кроме того, вы можете видеть, что я внедряю стили по всему сайту, импортируя их из моего файла styles.js. Давайте посмотрим, как выглядит этот файл.

styles.js

import React from 'react'
import css from 'next/css'
export const somestyles = css({
  maxWidth: '500px',
  '@media (max-width: 600px)': {
    maxWidth: '100%'
  }
})
export const otherstyles = css({
  color: 'green',
  ':hover': {
    color: 'blue'
  }
})
export const headerStyles = css({
  fontSize: ‘16px
})
export const footerStyles = css({
  width: ‘100%’,
  backgroundColor: ‘#e5e5e5’
})
export const aboutContainer = css({
  backgroundColor: ‘red’
})

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

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

header.js

import React from 'react'
import { headerStyles } from '../styles/styles'
export default ({ children }) => (
  <header className={ headerStyles }>
    <h1>Page Title - {children}</h1>
  </header>
)

footer.js

import React from 'react'
import { footerStyles } from '../styles/styles'
export default ({ children }) => (
  <footer className={ footerStyles }>
    <p>Footer Test: { children }</p>
  </footer>
)

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

Шаг 3. Добавление еще одной страницы и элемента ссылки

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

Давайте создадим новый файл в папке страниц под названием about.js, который будет содержать содержание нашей страницы "О нас".

about.js

import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Header from '../components/header'
import Footer from '../components/footer'
import { somestyles, aboutContainer } from '../styles/styles'
export default class extends React.Component {
  static async getInitialProps () {
 //code will go here to get data
  }
  constructor (props) {
     super(props)
  }
  render() {
    return (
      <div className={ somestyles }>
        <Head>
          <title>Next -- About Us</title>
        </Head>
        <Header>About</Header>
        <div className={ aboutContainer }>
          <h2>About Us</h2>
          <p>Paragraph about us will go here maybe</p>
        </div>
        <Footer />
      </div>
    )
  }
}

Эта страница, помещенная в папку наших страниц, автоматически создаст маршрут к странице about (например, «localhost: 3030 / about» или «myurl.whatev / about»).

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

Прежде чем мы закроем это, давайте воспользуемся функцией "Ссылка" в разделе "Далее", чтобы добавить быструю навигацию к нашему файлу header.js.

header.js

import React from 'react'
import { headerStyles, headerNav } from '../styles/styles'
//Add reference to Link functionality from the Next core
import Link from 'next/link'
export default ({ children }) => (
  <header className={ headerStyles }>
    <h1>Page Title - {children}</h1>
    <ul className={ headerNav }>
      <li><Link href="/">Home</Link></li>
      <li><Link href="/about">About</Link></li>
    </ul>
  </header>
)

Шаг 4. Запуск вашего приложения

Теперь, когда у нас есть весь этот код, давайте посмотрим, как он выглядит. В файле package.json мы определили наши сценарии запуска. Мы перейдем к развертыванию в Интернете позже, но для его локального запуска вы будете использовать эту команду из своей командной строки, а затем перейдите к localhost: 3000, чтобы просмотреть приложение:

npm run dev

Вот это да!! Теперь у вас есть довольно уродливый и бесполезный PWA - к которому вы можете добавить массу вещей, которые сделают его потрясающим и полезным!

В следующей статье я обращусь к импорту данных из API и отображению их на страницах.