Next.js — это популярная среда React, которая позволяет разработчикам создавать быстрые приложения, отображаемые на сервере. Он предоставляет мощные функции «из коробки», такие как генерация статического сайта (SSG), рендеринг на стороне сервера (SSR) и маршруты API. В этом руководстве мы рассмотрим процесс создания вашего первого приложения Next.js, уделив особое внимание ключевым понятиям и практическим примерам.

1. Настройка проекта Next.js

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

npx create-next-app my-next-app

Эта команда создает новый каталог с именем my-next-app со всеми необходимыми файлами и зависимостями для запуска приложения Next.js.

2. Навигация по структуре проекта

После создания проекта перейдите в каталог проекта:

cd my-next-app

Внутри каталога my-next-app вы найдете структуру, подобную этой:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

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

3. Создание вашей первой страницы

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

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

В этом примере мы создали простую страницу «О программе» и использовали компонент «Ссылка» для возврата на домашнюю страницу.

4. Изменение домашней страницы

Откройте файл index.js в каталоге страниц. Этот файл представляет домашнюю страницу вашего приложения. Вы можете изменить его следующим образом:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

Здесь мы добавили простой стиль и ссылку на страницу «О программе».

5. Добавление стилей в ваше приложение

Next.js поддерживает модули CSS «из коробки». Чтобы стилизовать ваши компоненты, вы можете создать модуль CSS в каталоге стилей. Например, создайте файл с именем Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Затем импортируйте этот модуль CSS на страницу index.js, как показано в предыдущем разделе.

6. Получение данных с помощью Next.js

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

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
    
  );
}

В этом коде мы получаем список сообщений из общедоступного API и отображаем его на главной странице.

7. Создание API-маршрутов

Next.js позволяет создавать маршруты API в каталоге страниц/api. Эти маршруты можно использовать для создания серверной функциональности. Например, создайте файл hello.js в каталоге страниц/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Вы можете получить доступ к этому маршруту API, перейдя по адресу http://localhost:3000/api/hello.

8. Развертывание приложения Next.js

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

1. Создайте учетную запись Vercel, если у вас ее нет.

2. Установите Vercel CLI глобально:
   

   npm install -g vercel
   

3. Выполните следующую команду в каталоге вашего проекта:
   

   vercel
   

4. Следуйте инструкциям для развертывания приложения.

9. Добавление динамической маршрутизации

Next.js поддерживает динамическую маршрутизацию с использованием скобок. Например, если вы хотите создать динамическую страницу сообщений в блоге, вы можете создать файл с именем [id].js в каталоге страниц/сообщений:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

Теперь вы можете получить доступ к определенному сообщению, перейдя в /posts/1, /posts/2 и т. д.

10. Реализация глобальных стилей

Если вы хотите применить глобальные стили к своему приложению, вы можете сделать это, создав файл с именем _app.js в каталоге страниц:

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

Затем создайте файл globals.css в каталоге стилей и добавьте свои глобальные стили:

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. Использование переменных среды

Next.js поддерживает переменные среды для хранения конфиденциальной информации. Вы можете создать файл .env.local в корне вашего проекта и добавить свои переменные:

API_URL=https://example.com/api

Затем вы можете получить доступ к этой переменной в своем приложении, используяprocess.env:

// Example usage in a component
const apiUrl = process.env.API_URL;

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

Next.js — это больше, чем просто фреймворк; это мощный инструмент, который может значительно улучшить ваш опыт веб-разработки. Его встроенные функции, такие как генерация статического сайта (SSG) и рендеринг на стороне сервера (SSR), позволяют создавать быстрые, удобные для пользователя приложения, оптимизированные для производительности и SEO.

Следующие шаги в вашем путешествии по Next.js

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

Промежуточное ПО — это мощная функция, позволяющая расширить функциональность вашего приложения путем добавления пользовательской логики до завершения запроса. Это означает, что вы можете манипулировать объектами запросов и ответов, аутентифицировать пользователей или даже беспрепятственно управлять перенаправлениями.

Далее мы рассмотрим Генерацию статического сайта (SSG). Этот метод предварительно визуализирует страницы во время сборки, что обеспечивает высокую скорость загрузки и повышает эффективность SEO. Поняв, как использовать SSG, вы сможете создавать приложения, которые будут не только динамичными, но и невероятно эффективными.

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

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

Вы также можете прочитать этот пост на:

Введение в Next.js: создание вашего первого приложения

Next.js — это популярная среда React, которая позволяет разработчикам создавать быстрые приложения, отображаемые на сервере. Он предоставляет мощные функции прямо из коробки!

salmaniyad.hashnode.dev

Найди меня:

Салманияд · GitHub

Инженер компьютерных систем | Веб-разработчик. SalmanIyad имеет 31 доступный репозиторий. Следуйте их коду на GitHub.

github.com