Вспомните опыт использования next.js для разработки официального сайта

React.js

1. Предварительное резюме

  • Недавно официальный сайт нашей компании был реструктурирован.Один официальный сайт оснащен фоном.Целью является динамическая настройка контента официального сайта.В прошлом он был записан в базу данных.Чтобы лучше работать с сайтом и отразить влияние бренда, это серьезное изменение произошло.

2. Анализ спроса

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

  • SEO
  • Интерфейс быстро реагирует, обеспечивая лучший пользовательский опыт

Все мы знаем, что у одностраничных приложений есть два фатальных недостатка: один из них неблагоприятен для SEO, а другой — долгое время белого экрана. Так называемое seo — это поисковая оптимизация.Короче говоря, dom-структура одностраничных приложений динамически генерируется js, а краулеры предпочитают статические страницы, поэтому одностраничные приложения не способствуют seo. Загрузка белого экрана в основном связана с тем, что для загрузки компонентов в одностраничном приложении требуется время, что создает недружественный пользовательский интерфейс. Эти два момента не очевидны в фоновом управлении, но если они используются на таких веб-сайтах, как официальные корпоративные веб-сайты или блоги, вам необходимо найти способы их решения.

Наиболее распространенный способ решения двух вышеперечисленных проблем — использование рендеринга на стороне сервера.Так называемый рендеринг на стороне сервера означает, что сервер напрямую возвращает html-структуру.Давным-давно, когда фронт и бэкенд не были разделены , способ рендеринга jsp относился к рендерингу на стороне сервера. Способ рендеринга одностраничных приложений на стороне сервера обычно заключается в использовании узла в качестве среднего уровня.После загрузки компонентов возвращайте структуру html на стойку регистрации.React Vue также имеет отзывчивый API для поддержки рендеринга на стороне сервера, но это сложнее сделать самому, мы можем использовать более зрелый серверный фреймворк рендеринга next.js.

3. Использование next.js

Установить леса

npm install -g create-next-app

построить проект

create-next-app myWebsite

После успешной установки появится соответствующее приглашение:

cd myWebsite

yarn dev

Браузер открывает localhost: 3000, и появляется следующая страница, указывая на то, что проект был успешно запущен

На следующем рисунке представлена ​​схема структуры проекта после создания строительных лесов:

Наша главная страница будет создаваться и развиваться под страницами.Каждая страница — это маршрут, а index.js — основная запись.Если мы создадим папку продукта под страницами и файл index.js под папкой продукта, то в Enter localhost: 3000/продукт в браузере для доступа к странице продукта.

4. Конкретная конфигурация

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

  • Где размещаются статические файлы? Например, изображения, файлы css и т. д. Также создайте статическую папку в корневом каталоге, вы можете создавать изображения или файлы css в статической папке.

  • В качестве UI-фреймворка проекта выбираем antd, для установки antd используем npm install antd или yarn add antd. После завершения установки необходимо настроить antd на загрузку по запросу.В это время необходимо создать в корневом каталоге файл .babelrc.В этот файл добавить следующий код:

{
    "presets": ["next/babel"],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "less"
        }
      ],
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  }
  • Мы хотим использовать меньше файлов при использовании css в проекте, как нам это изменить? Создайте файл next.config.js в корневом каталоге и добавьте в этот файл следующий код:
const withCss = require("@zeit/next-css");
const widthLess = require('@zeit/next-less');
if (typeof require !== 'undefined') {
    require.extensions['.css'] = file => { }
}

module.exports = widthLess(withCss({
  lessLoaderOptions: {
    javascriptEnabled: true,
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  distDir: 'build',
  webpack: (config, { dev }) => {
      config.module.rules.push(
          {
            test: /\.(png|jpg|svg|eot|otf|ttf|woff|gif|woff2)$/,
            use: {
              loader: "url-loader?limit=8024",
              options: {
                name: "[name].[ext]"
              }
            }
          },
          {
              test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
              loader: require.resolve('file-loader'),
              options: {
                  name: '/static/media/[name].[hash:8].[ext]'
              }
          }
      )
      // config.plugins.push(new CleanWebpackPlugin())
      return config
  }
}))

Вы можете видеть, что мы используем модули @zeit/next-css и @zeit/next-less, оба из которых используются в next.js для поддержки использования файлов стилей. Пожалуйста, npm установите их перед использованием. В файле next.config.js вы можете настроить конфигурацию веб-пакета.Вы можете видеть, что я настроил здесь lessLoaderOption для динамической установки цвета темы antd, distDir, который используется для объявления адреса упакованного файла, а также некоторых изображения, svg и т. д. для загрузки конфигурации. Перед использованием необходимо установить соответствующий загрузчик wenpack. Таким образом, вы можете использовать файлы, такие как статические изображения, в своем проекте.

Пока что antd можно использовать нормально, но если вы хотите настроить цвет темы antd, как с этим быть? Создайте новую папку asserts в корневом каталоге, создайте файлы antd-customs.less и styles.les в папке и добавьте следующие стили css соответственно.

@primary-color: #29CCB1;

@layout-header-height: 40px;
@border-radius-base: 4px;

@import "~antd/dist/antd.less";
@import "./antd-custom.less";

Затем создайте файл _app.js под страницами и добавьте в файл следующий код.

import App from 'next/app'
import '../asserts/styles.less'


export default App

хорошо, ваша и пользовательская тема уже в силе.

Когда вам нужно настроить кросс-доменность в вашем проекте, как вы это делаете? next.js поддерживает собственный сервер. Также в корневом каталоге создайте новый server.js и добавьте следующий код:

// server.js
const express = require('express')
const next = require('next')
const { createProxyMiddleware  } = require('http-proxy-middleware')

const devProxy = {
    '/api/v': {
        target: 'http://192.168.3.18:8092', // 端口自己配置合适的
        // pathRewrite: {
        //     '^/api': '/'
        // },
        changeOrigin: true
    }
}

const port = parseInt(process.env.PORT, 10) || 80
const dev = process.env.NODE_ENV !== 'production'
const app = next({
    dev
})
const handle = app.getRequestHandler()

app.prepare()
    .then(() => {
        const server = express()

        if (dev && devProxy) {
            Object.keys(devProxy).forEach(function(context) {
                server.use(createProxyMiddleware (context, devProxy[context]))
            })
        }
        server.all('*', (req, res) => {
            handle(req, res)
        })

        server.listen(port, err => {
            if (err) {
                throw err
            }
            console.log(`> Ready on http://localhost:${port}`)
        })
    })
    .catch(err => {
        console.log('An error occurred, unable to start the server')
        console.log(err)
    })

Затем настройте в файле package.json:

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "cross-env NODE_ENV=production node server.js"
  },

После всего этого набора процессов вы можете с радостью заняться развитием бизнеса. Взгляните на полную структуру проекта:

Для других соответствующих точек знаний вы можете перейти на официальный сайт https://nextjs.frontendx.cn/docs, чтобы просмотреть конкретные точки знаний.

Совет: если во время описанного выше процесса вам будет предложено, что модуль отсутствует, вы можете напрямую установить следующее с помощью npm install.

5. Вывод

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

В этой статье используетсяmdniceнабор текста

Категории