Skip to content

Update translations #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 6, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
---
source-updated-at: 2025-06-01T01:32:20.000Z
translation-updated-at: 2025-06-02T19:58:22.008Z
source-updated-at: 2025-06-03T15:30:49.000Z
translation-updated-at: 2025-06-06T16:44:10.522Z
title: Как обновлять данные
nav_title: Обновление данных
description: Узнайте, как обновлять данные в вашем Next.js приложении.
description: Узнайте, как обновлять данные в вашем приложении Next.js.
related:
title: Справочник API
description: Узнайте больше о функциях, упомянутых на этой странице, из справочника API.
description: Узнайте больше о функциях, упомянутых на этой странице, из Справочника API.
links:
- app/api-reference/functions/revalidatePath
- app/api-reference/functions/revalidateTag
- app/api-reference/functions/redirect
---

Вы можете обновлять данные в Next.js с помощью [Серверных функций (Server Functions)](https://react.dev/reference/rsc/server-functions) React. На этой странице объясняется, как [создавать](#creating-server-functions) и [вызывать](#invoking-server-functions) серверные функции.
Вы можете обновлять данные в Next.js, используя [Серверные функции (Server Functions)](https://react.dev/reference/rsc/server-functions) React. На этой странице объясняется, как [создавать](#creating-server-functions) и [вызывать](#invoking-server-functions) серверные функции.

## Серверные функции

Серверная функция — это асинхронная функция, которая выполняется на сервере. Серверные функции по своей природе асинхронны, так как вызываются клиентом через сетевой запрос. Когда они вызываются как часть `action`, их также называют **Серверными действиями (Server Actions)**.
Серверная функция — это асинхронная функция, выполняемая на сервере. Серверные функции по своей природе асинхронны, так как вызываются клиентом через сетевой запрос. При вызове в рамках `action` они также называются **Серверными действиями (Server Actions)**.

По соглашению, `action` — это асинхронная функция, передаваемая в `startTransition`. Серверные функции автоматически оборачиваются в `startTransition`, когда:

- Передаются в `<form>` через проп `action`
- Передаются в `<button>` через проп `formAction`
- Передаются в `useActionState`
- Передаются в `<form>` через проп `action`,
- Передаются в `<button>` через проп `formAction`,
- Передаются в `useActionState`.

## Создание серверных функций

Серверную функцию можно определить с помощью директивы [`use server`](https://react.dev/reference/rsc/use-server). Вы можете разместить директиву в начале **асинхронной** функции, чтобы пометить её как серверную, или в начале отдельного файла, чтобы пометить все экспортируемые функции в этом файле.
Серверную функцию можно определить с помощью директивы [`use server`](https://react.dev/reference/rsc/use-server). Вы можете разместить директиву в начале **асинхронной** функции, чтобы пометить её как серверную, или в начале отдельного файла, чтобы пометить все экспортируемые функции в нём.

```ts filename="app/lib/actions.ts" switcher
export async function createPost(formData: FormData) {
Expand All @@ -36,15 +36,15 @@ export async function createPost(formData: FormData) {
const content = formData.get('content')

// Обновление данных
// Инвалидация кеша
// Ревалидация кэша
}

export async function deletePost(formData: FormData) {
'use server'
const id = formData.get('id')

// Обновление данных
// Инвалидация кеша
// Ревалидация кэша
}
```

Expand All @@ -55,21 +55,21 @@ export async function createPost(formData) {
const content = formData.get('content')

// Обновление данных
// Инвалидация кеша
// Ревалидация кэша
}

export async function deletePost(formData) {
'use server'
const id = formData.get('id')

// Обновление данных
// Инвалидация кеша
// Ревалидация кэша
}
```

### Серверные компоненты

Серверные функции могут быть встроены в серверные компоненты с помощью директивы `"use server"` в теле функции:
Серверные функции могут быть встроены в серверные компоненты, если добавить директиву `"use server"` в начало тела функции:

```tsx filename="app/page.tsx" switcher
export default function Page() {
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function Page() {

### Клиентские компоненты

Невозможно определить серверные функции в клиентских компонентах. Однако их можно вызывать из клиентских компонентов, импортируя из файла с директивой `"use server"`:
Невозможно определить серверные функции в клиентских компонентах. Однако их можно вызывать из клиентских компонентов, импортируя из файла с директивой `"use server"` в начале:

```ts filename="app/actions.ts" switcher
'use server'
Expand Down Expand Up @@ -180,7 +180,7 @@ export async function createPost(formData: FormData) {
const content = formData.get('content')

// Обновление данных
// Инвалидация кеша
// Ревалидация кэша
}
```

Expand All @@ -192,15 +192,15 @@ export async function createPost(formData) {
const content = formData.get('content')

// Обновление данных
// Инвалидация кеша
// Ревалидация кэша
}
```

> **Полезно знать:** При передаче в проп `action` серверные функции также называются _Серверными действиями (Server Actions)_.

### Обработчики событий

Серверную функцию можно вызвать в клиентском компоненте через обработчики событий, такие как `onClick`.
Серверную функцию можно вызвать в клиентском компоненте через обработчики событий, например `onClick`.

```tsx filename="app/like-button.tsx" switcher
'use client'
Expand Down Expand Up @@ -261,15 +261,15 @@ export default function LikeButton({ initialLikes }) {
```tsx filename="app/ui/button.tsx" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : 'Создать пост'}
</button>
)
Expand All @@ -279,24 +279,24 @@ export function Button() {
```jsx filename="app/ui/button.js" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : 'Создать пост'}
</button>
)
}
```

### Инвалидация кеша
### Ревалидация кэша

После обновления данных можно инвалидировать кеш Next.js и показать обновлённые данные, вызвав [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) или [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) внутри серверной функции:
После обновления данных можно ревалидировать кэш Next.js и показать обновлённые данные, вызвав [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) или [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) внутри серверной функции:

```ts filename="app/lib/actions.ts" switcher
import { revalidatePath } from 'next/cache'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
source-updated-at: 2025-06-01T01:32:20.000Z
translation-updated-at: 2025-06-02T19:57:13.804Z
title: Развертывание Next.js приложения
source-updated-at: 2025-06-05T23:52:35.000Z
translation-updated-at: 2025-06-06T16:43:20.246Z
title: Как развернуть приложение Next.js
nav_title: Развертывание
description: Узнайте, как развернуть ваше Next.js приложение.
description: Узнайте, как развернуть ваше приложение Next.js.
---

Next.js можно развернуть как сервер Node.js, контейнер Docker, статический экспорт или адаптировать для работы на различных платформах.

| Вариант развертывания | Поддерживаемые функции |
| -------------------------------- | ---------------------- |
| [Сервер Node.js](#nodejs-server) | Все |
| [Контейнер Docker](#docker) | Все |
| [Статический экспорт](#static-export) | Ограниченные |
| [Адаптеры](#adapters) | Зависит от платформы |
| Вариант развертывания | Поддержка функций |
| ------------------------------- | ----------------- |
| [Сервер Node.js](#nodejs-server) | Полная |
| [Контейнер Docker](#docker) | Полная |
| [Статический экспорт](#static-export) | Ограниченная |
| [Адаптеры](#adapters) | Зависит от платформы |

## Сервер Node.js

Next.js можно развернуть на любом провайдере, поддерживающем Node.js. Убедитесь, что в вашем `package.json` есть скрипты `"build"` и `"start"`:
Next.js можно развернуть на любом провайдере, поддерживающем Node.js. Убедитесь, что ваш `package.json` содержит скрипты `"build"` и `"start"`:

```json filename="package.json"
{
Expand All @@ -43,7 +43,9 @@ Next.js можно развернуть на любом провайдере, п

Next.js можно развернуть на любом провайдере, поддерживающем контейнеры [Docker](https://www.docker.com/). Это включает оркестраторы контейнеров, такие как Kubernetes, или облачные провайдеры, работающие с Docker.

Развертывания с Docker поддерживают все функции Next.js. Узнайте, как [настроить их](/docs/app/guides/self-hosting) для вашей инфраструктуры.
Развертывания в Docker поддерживают все функции Next.js. Узнайте, как [настроить их](/docs/app/guides/self-hosting) для вашей инфраструктуры.

> **Примечание для разработки:** Хотя Docker отлично подходит для продакшен-развертываний, для разработки на Mac и Windows рекомендуется использовать локальное окружение (`npm run dev`) вместо Docker для лучшей производительности. [Подробнее об оптимизации локальной разработки](/docs/app/guides/local-development).

### Шаблоны

Expand All @@ -57,7 +59,7 @@ Next.js можно развернуть на любом провайдере, п

## Статический экспорт

Next.js позволяет начать со статического сайта или [одностраничного приложения (SPA)](/docs/app/guides/single-page-applications), а затем при необходимости перейти к использованию функций, требующих сервера.
Next.js позволяет начать со статического сайта или [одностраничного приложения (SPA)](/docs/app/guides/single-page-applications), а затем при необходимости добавить функции, требующие сервера.

Поскольку Next.js поддерживает [статический экспорт](/docs/app/guides/static-exports), его можно развернуть на любом веб-сервере, способном обслуживать статические файлы HTML/CSS/JS. Это включает такие инструменты, как AWS S3, Nginx или Apache.

Expand Down
Loading