Next.js: Получение и обработка данных (Урок 4)

Подготовка проекта

Проект очищен: удалены папка Clyde и иконка вкладки (icon). Остались глобальные стили, глобальный шаблон и файл page.js.

Создание компонента шапки сайта

Создадим компонент шапки в components/header.js:

// components/header.js
import Link from 'next/link';

const Header = () => {
  return (
    <header>
      <h1>Название сайта</h1>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
      </nav>
    </header>
  );
};

export default Header;

Импортируем и отобразим Header в основном шаблоне (pages/index.js или аналогичном):

// pages/index.js
import Header from '../components/header';

// ... ваш код ...

<Header />

Добавим стили в globals.css:

/* globals.css */
header {
  /* ... стили для header ... */
}

header a {
  margin-left: 20px;
  /* ... стили для ссылок ... */
}

Создание страницы «About»

Создадим страницу «About» в pages/about/page.js:

// pages/about/page.js
export default function About() {
  return (
    <div>
      <h1>Страница "About"</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );
}

Добавим в основной шаблон класс container и стили в globals.css:

/* globals.css */
.container {
  padding: 50px;
}

Получение и вывод данных с внешнего API

Будем использовать внешний API (ссылка на API будет в описании). Создадим функцию fetchData:

// pages/index.js
async function fetchData() {
  const res = await fetch('URL_API_ПОСТОВ'); // Замените на реальный URL
  const posts = await res.json();
  return posts;
}

Используем fetchData для отображения данных:

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

async function fetchData() {
    // ... (код функции fetchData) ...
}

export default async function Home() {
    const posts = await fetchData();

    return (
        <div className="container">
          <h1>Главная страница</h1>
          {posts.map((element) => (
            <div key={element.id} className="post">
              <h2>{element.title}</h2>
              <p>{element.body}</p>
              <Link href={`/post/${element.id}`}>
                <a>Подробнее</a>
              </Link>
            </div>
          ))}
        </div>
    );
}

Добавим стили для класса post в globals.css.

Мы создали компонент шапки, страницу «About», и научились получать и обрабатывать данные с внешнего API, отображая их на главной странице. Это базовый пример, который можно расширить, добавив обработку ошибок, пагинацию и другие функции.