Создание веб-приложений может быть непростой задачей, особенно когда вам приходится иметь дело с настройкой исходной структуры проекта. К счастью, 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
для выполнения запросов к APIformik
илиreact-hook-form
для управления формамиreact-query
илиswr
для управления выборкой и кэшированием данных
Чтобы установить любой из этих пакетов, просто запустите следующую команду в корневом каталоге вашего проекта:
npm install [package-name]
Шаг 3: Настройте ESLint и Prettier
ESLint и Prettier — это инструменты, которые помогают поддерживать стабильное качество кода в вашем проекте. Чтобы настроить их в своем проекте Next.js, выполните следующие действия:
- Установите 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 позволяет вам создать глобальную таблицу стилей, которая загружается на каждой странице вашего приложения. Чтобы создать глобальную таблицу стилей, выполните следующие действия:
- Создайте новый файл с именем
global.css
в каталогеstyles
вашего проекта. - Добавьте в этот файл свои глобальные стили CSS.
- Импортируйте глобальную таблицу стилей в файл
_app.js
:
import '../styles/global.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp
Шаг 5: Настройте заголовок ваших страниц
Компонент Head
в Next.js позволяет указать метаданные для каждой страницы вашего приложения, такие как заголовок страницы, описание и ключевые слова. Чтобы настроить Head
ваших страниц, выполните следующие действия:
- Импортируйте компонент
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 позволяет настроить документ, отображаемый на каждой странице вашего приложения. Это может быть полезно, если вам нужно добавить на свои страницы собственные скрипты, таблицы стилей или метаданные.
Чтобы создать пользовательский документ, выполните следующие действия:
- Создайте новый файл с именем
_document.js
в каталогеpages
вашего проекта. - Добавьте в этот файл следующий код:
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, готовый к настройке и развитию. Удачного кодирования!