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

В этой статье мы проведем вас через шаги по настройке проекта Next.js.

Шаг 1: Создайте новый проект Next.js

Чтобы создать новый проект Next.js, вы можете использовать следующую команду:

npx create-next-app

Это создаст новый проект с базовой структурой, которая включает каталог pages для страниц вашего приложения, каталог public для статических ресурсов и каталог styles для глобальных стилей CSS.

Шаг 2. Установите дополнительные пакеты

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

  • react-bootstrap или tailwindcss для стиля
  • axios или fetch для выполнения запросов к API
  • formik или react-hook-form для управления формами
  • react-query или swr для управления выборкой и кэшированием данных

Чтобы установить любой из этих пакетов, просто запустите следующую команду в корневом каталоге вашего проекта:

npm install [package-name]

Шаг 3: Настройте ESLint и Prettier

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

  1. Установите ESLint и Prettier в качестве зависимостей для разработчиков:
npm install --save-dev eslint prettier

2. Установите необходимые плагины и конфигурации для ESLint и Prettier:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

3. Создайте файл .eslintrc.json в корневом каталоге вашего проекта и добавьте следующую конфигурацию:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

4. Создайте файл .prettierrc в корневом каталоге вашего проекта и добавьте следующую конфигурацию:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": false
}

Шаг 4: Создайте глобальную таблицу стилей

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

  1. Создайте новый файл с именем global.css в каталоге styles вашего проекта.
  2. Добавьте в этот файл свои глобальные стили CSS.
  3. Импортируйте глобальную таблицу стилей в файл _app.js:
import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Шаг 5: Настройте заголовок ваших страниц

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

  1. Импортируйте компонент Head из next/head:
import Head from 'next/head'

2. Добавьте компонент Head на каждую страницу вашего приложения и укажите метаданные, которые вы хотите включить:

function Home() {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="This is my Next.js app." />
        <meta name="keywords" content="next.js, react, web development" />
      </Head>
      <h1>Welcome to my Next.js App!</h1>
    </div>
  )
}

export default Home

Шаг 6: Добавьте пользовательский документ

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

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

  1. Создайте новый файл с именем _document.js в каталоге pages вашего проекта.
  2. Добавьте в этот файл следующий код:
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* add any custom scripts or stylesheets here */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Шаг 7: Настройте сервер разработки

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

npm run dev

Это запустит сервер разработки по адресу http://localhost:3000, где вы сможете просматривать свое приложение и вносить в него изменения в режиме реального времени.

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