Учебный курс по Next.js 13.5 – Освой новый Next.js за 54 минуты!

Добро пожаловать в полный курс по Next.js 13.5! В этом уроке мы изучим новую и улучшенную версию Next.js за 54 минуты. Next.js – это популярный фреймворк для создания реактивных веб-приложений на основе React. Его простота в использовании и мощные функциональности делают его отличным выбором для разработки как небольших, так и крупных проектов.

Начнем с установки Next.js. Для этого вам понадобится Node.js и npm. Установите их, если у вас их еще нет. Затем откройте ваш терминал и введите следующую команду:

npx create-next-app@13.5 my-next-app

Эта команда создаст новое приложение Next.js с именем my-next-app. Перейдите в созданную директорию, используя команду cd my-next-app, и запустите разработческий сервер с помощью команды:

npm run dev

Теперь ваше приложение запущено и доступно на http://localhost:3000. Вы можете открыть его в браузере и увидеть приветственную страницу Next.js.

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

Теперь создадим несколько страниц для нашего приложения. В папке pages Next.js использует файловую систему для определения маршрутов. Создайте файл about.js в папке pages и добавьте следующий код:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of our Next.js app.</p>
    </div>
  );
};

export default About;

Теперь, если вы перейдете на http://localhost:3000/about, вы увидите страницу About, которую только что создали.

Следующим шагом будет работа с динамическим маршрутизатором Next.js. Создайте новый файл pages/post/[id].js и добавьте следующий код:

import React from 'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the post page with id: {id}.</p>
    </div>
  );
};

export default Post;

Теперь, если вы перейдете на http://localhost:3000/post/1, вы увидите страницу Post с id равным 1. Вы можете также создавать динамические маршруты с использованием квадратных скобок в имени файла, как мы сделали здесь.

Наконец, давайте добавим стилей к нашему приложению. Next.js поддерживает CSS модули, Styled Components и другие способы стилизации. Создайте файл styles.module.css в папке styles и добавьте следующий код:

.container {
  max-width: 800px;
  margin: 0 auto;
}

.title {
  font-size: 2rem;
  color: #333;
}

Измените файл about.js, чтобы применить стили:

import React from 'react';
import styles from '../styles/styles.module.css';

const About = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>About Page</h1>
      <p>This is the about page of our Next.js app.</p>
    </div>
  );
};

export default About;

Теперь у вас есть стилизованная страница About в вашем приложении Next.js.

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