Курс Next js 14 – Без лишних слов за 40 минут! RED Essence

Next.js — это фреймворк для React, который позволяет создавать универсальные приложения с использованием JavaScript или TypeScript. В этом курсе мы поговорим о новых возможностях Next.js 14 и узнаем, как использовать их в своих проектах.

Шаг 1: Установка Next.js

Для начала работы с Next.js вам нужно установить его в свой проект. Для этого откройте терминал и выполните команду:

npx create-next-app@latest имя_проекта

После установки вы можете перейти в папку вашего проекта, используя команду:

cd имя_проекта

Шаг 2: Создание компонентов

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

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

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default MyComponent;

Шаг 3: Использование маршрутизации

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

Пример создания новой страницы:

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our website!</p>
    </div>
  );
};

export default AboutPage;

Шаг 4: Использование стилей

Next.js поддерживает CSS модули для стилизации компонентов. Вы можете создать файл стилей с расширением .module.css и импортировать его в свой компонент.

Пример использования CSS модулей:

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

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default MyComponent;

Шаг 5: Запуск приложения

Чтобы запустить ваше приложение, выполните команду:

npm run dev

Эта команда запускает Next.js приложение в режиме разработки на порту 3000. Вы можете открыть браузер и перейти по адресу http://localhost:3000, чтобы увидеть ваше приложение в действии.

Шаг 6: Деплой приложения

После завершения разработки вашего приложения, вы можете задеплоить его на платформе Vercel. Для этого вам нужно создать учетную запись на сайте vercel.com и загрузить ваш проект используя команду:

vercel

Следуйте инструкциям на сайте, чтобы задеплоить ваше приложение. После успешного деплоя, ваше приложение будет доступно по уникальному URL адресу.

Это был краткий обзор курса по Next.js 14. Надеюсь, что эта информация была полезной для вас! Спасибо за внимание!