Среду next.js+koa2+antd легко построить

предисловие

В этой статье мы познакомимся с построением среды next.js. Здесь мы возьмем next+koa2+ant desin в качестве примера для создания среды разработки с полным стеком. express, egg.js Вы можете свободно комбинировать библиотеки компонентов пользовательского интерфейса, такие как фреймворки и элементы пользовательского интерфейса, и выбирать решение, которое вам подходит.

Подходит для толпы: те, кто понимает node.js, имеет представление о реакции, слышал о рендеринге на стороне сервера, но не практиковал его, знает next.js, но не будет сочетать его с бэкэнд-фреймворком и Библиотека компонентов пользовательского интерфейса.

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

Используйте пользовательский метод для создания следующей среды

Создать каталог проекта

mkdir next-learn
cd next-learn

Если вы используете Windows, вы можете загрузить git, использовать приведенные выше команды через git bash или создать папку следующего обучения через среду рабочего стола.Я надеюсь, что каждый может использовать командную строку для работы в максимально возможной степени.

инициализация npm/пряжи

Я думаю, что все здесь знакомы с npm, но многие друзья, возможно, слышали о нем.yarnНо не узнал. Вот краткое описание: скорость загрузки npm иногда действительно неудобна. Появление пряжи может значительно облегчить эту ситуацию. Во многих случаях это даже быстрее, чем использование зеркалирования Taobao. Заинтересованные партнеры могут перейти на официальный сайт, чтобы просто понять и скачать и использовать.

npm для инициализации:npm init
пряжа для инициализации:yarn init

Вы всегда можете нажать Enter, здесь я буду использовать пряжу

установка next, react, react-dom

этот шагофициальный сайт next.jsЭто также очень подробно

установка нпмnpm install next react react-dom --save
пряжа установитьyarn add next react react-dom

Измените файл package.json

пройти черезnpm initМелкие партнеры открывают package.json и там будет поле «скрипты». но черезyarn initИнициализированный package.json не имеет поля «скрипты», потому что пустые объекты в package.json будут удалены после инициализации пряжи, мы можем добавить их сами

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

Запуск следующего проекта

Создан в корневом каталоге проектаpagesсодержание
Откройте инструмент командной строки в корневом каталоге для выполненияnpm run devилиyarn devОткройте проект, проект открывается на порту 3000 по умолчанию, а затем введите в chromehttp:localhost:3000
Мы увидим 404 в браузере, это потому, что мы ничего не помещали в каталог страниц, это нормально отображать

Создать страницы/index.js

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

export default () => <h1>hello this is my first next.js page</h1>

На этом этапе браузер должен иметь возможность отображать информацию, которую мы написали.

Используйте скаффолдинг create-next-app для создания следующей среды

Этот способ автоматизирован и выполняет ту же работу, что и выше.

Установить глобальноnpm install -g create-next-app

Три способа использования create-next-app

Установить через npxnpx create-next-app next-learn2(npx устанавливается по умолчанию в node.js8 и выше)
Установить через пряжу создатьyarn create next-app next-learn2(как я использую)
Установить через create-next-appcreate-next-app next-learn

Отличие строительных лесов от ручной установки

Строительные леса более автоматизированы и проще
После установки инструмента скаффолдинга будет на один каталог компонентов и статический каталог больше, чем при нашей ручной установке.В каталоге компонентов есть два компонента и favicon.ico в статическом каталоге.Мы можем заменить его на favicon.ico нашего собственного проекта.

Остальные места такие же, как мы создали вручную, поyarn devОткройте проект, чтобы увидеть эффект

присоединиться к коа2

next.js поставляется со своим собственным сервером, но его возможности очень ограничены, он может обрабатывать только рендеринг ssr. Мы можем использовать next.js в качестве промежуточного программного обеспечения koa, конечно, вы также можете выбрать экспресс и egg.js, использование очень похоже.

установить коа

установка нпмnpm install koa --save
пряжа установитьyarn add koa

Создайте server.js в корневом каталоге

const Koa = require('koa')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = new Koa()
  server.use(async (ctx, next) => {
    await handle(ctx.req, ctx.res)
    ctx.respond = false
  })

  server.listen(3000, () => {
    console.log('server is running at http://localhost:3000')
  })
})

Скажи это здесьapp.prepare(), Нам нужно дождаться компиляции всех страниц в каталоге pages, а затем запустить службу koa. здесьhandle(ctx.req, ctx.res)Переданные здесь req и res являются содержимым собственного http-модуля nodejs.Если вы используете экспресс или egg.js, обратите внимание на параметры здесь

изменить package.json

Мы хотим изменить «dev» в поле «scripts» в package.json на"dev": "node ./server.js",Потому что сейчас мы собираемся запустить сервер koa Затем введите «yarn dev» или «npm run dev» в командной строке, чтобы запустить службу.

нормальный доступ к странице

Затем вы можете использовать koa или другой фреймворк node.js для внутренней разработки.

Присоединяйтесь к муравьиному дизайну

Настройте next.js для нормального анализа CSS

Конфигурация next.js по умолчанию не может анализировать файлы css, нам нужно создать их в корневом каталоге.next.config.jsфайл конфигурации установить плагин@zeit/next-cssустановка нпмnpm install @zeit/next-css --saveпряжа установитьyarn add @zeit/next-css

Использовать в конфигурационном файле:

const WithCss = require('@zeit/next-css')

if(typeof require !== 'undefined') {
    require.extensions['.css'] = file => {}
}

module.exports = WithCss({})

Если вы хотите поддержать sass, вы можете использоватьWithSass(WithCss({})), вы можете проверить это самостоятельно

Вы можете написать тест css, здесь я изменил цвет заголовка

Установите antd и babel-plugin-import

установка нпмnpm install antd babel-plugin-import
пряжа установитьyarn add antd babel-plugin-import

Добавить конфигурацию BabelСоздал в корневом каталоге.babelrcдокумент

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd"
            }
        ]
    ]
}

Добавлено в пресеты["next/babel"]Разрешить babel поддерживать все подключаемые модули конфигурации babel, используемые в следующем Внедрить antd в плагины для поддержки внедрения antd по запросу.

Введите css-файл antd

Создается в каталоге pages_app.jsфайл, вот место для следующего компонента приложения, здесь мы пока не будем изменять компонент приложения, просто импортируем его, а затем экспортируем как есть, и, кстати, импортируем файл antd css

import App from 'next/app'
import 'antd/dist/antd.css'

export default App

Советы: не в.babelrcКонфигурация css в плагине mini-css-extract будет содержать ошибки.

пытатьсяЯ добавил компонент Button в index.js, и он успешно отобразился, как и ожидалось.

import { Button } from 'antd'

......
<Button>Antd Button</Button>
......

Суммировать

Ну а вот комбинация next.js+koa+antd, если интересно, можете попробовать другие комбинации, которые вам нравятся

напиши в конце

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

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