Skip to content

docs(guides): update next.js tech guide to the relevant status #830

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

Open
wants to merge 13 commits into
base: master
Choose a base branch
from

Conversation

GeorgKrom
Copy link
Contributor

@GeorgKrom GeorgKrom commented Jul 11, 2025

Перенёс приоритет с pages на app router, добавил небольшие примеры с импортами и тезисно дописал несколько рекомендаций

@illright illright requested a review from Copilot July 12, 2025 16:00
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

A concise update of the Next.js integration guide to prioritize the App Router, add import examples, and flesh out recommendations.

  • Standardize all references from “NextJS” to “Next.js” and reorganize conflict sections.
  • Introduce code snippets for re-exporting pages, middleware, instrumentation, and route handlers.
  • Enhance guidance with additional recommendations and updated links to Next.js documentation.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx Refined headings and routing sections, added App Router examples, middleware/instrumentation/route-handler guidance, and extra recommendations
i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx Mirrored updates in English: standardized naming, new code examples, and extended best practices
Comments suppressed due to low confidence (2)

i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx:66

  • Тип IProps не определён в примере; скорее должен использоваться AppProps из Next.js или необходимо добавить определение интерфейса IProps.
const App = ({ Component, pageProps }: IProps) => {

i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx:65

  • The example uses an undefined IProps type; it should use AppProps from Next.js or include a definition for IProps.
const App = ({ Component, pageProps }: IProps) => {

Copy link
Member

@illright illright left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Спасибо, стало намного лучше! Оставил несколько предложений по улучшениям

├── shared
├── widgets
### Route Handlers
It is suggested to use a new `routes` segment in the `app` or `pages` layer to work with Route Handlers.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: this part isn't clear to me. You mention that it's recommended to use the routes segment, but the code block below doesn't demonstrate it.

suggestion: let's also add a code block where getExample is defined so that it's clear how and where to define route handlers

But also, should this really be in the FSD structure? I feel like mixing in unrelated backend code into the frontend code folder might make it hard to find. Let's discuss and refine this point a bit, perhaps also get people from the chat to give their opinion

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But also, should this really be in the FSD structure? I feel like mixing in unrelated backend code into the frontend code folder might make it hard to find. Let's discuss and refine this point a bit, perhaps also get people from the chat to give their opinion

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В целом, я согласен с тобой, что есть польза в том, чтоб описать, куда мы предлагаем класть простенькие API-роуты, раз уж мы всю структуру перерыли. Давай может тогда вот так поступим:

  • уберем из рекомендаций предложение хранить их в pages — они не имеют отношения к страницам, пусть уж будут в app только
  • сделаем два код-блока в этой секции, первый в src/app/api-routes (мне больше нравится api-routes, потому что тогда не путаем с роутами, по которым находятся страницы), и в нем прямо полноценное описание функции-хендлера getExampleData. Внутри этой функции можем даже заюзать db из shared/db, чтоб продемонстрировать реюз коннекшна между роут-хендлерами и серверными компонентами
  • второй код-блок в app/api/example, и он реэкспортирует getExampleData as GET

@GeorgKrom GeorgKrom requested a review from illright July 17, 2025 08:18
@GeorgKrom
Copy link
Contributor Author

@illright, привет, хотел напомнить о себе и обсудить сегмент роутов, каких-то комментариев из ребят в чате особо выудить не получилось

@illright
Copy link
Member

Привет, спасибо, да, завтра посмотрю основательно апдейты

Copy link
Member

@illright illright left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Так, наконец-то собрался с мыслями. Спасибо за терпение :) Отписал свои мысли по поводу вопросов, которые поднимал на прошлом раунде комментариев

├── shared
├── widgets
### Route Handlers
It is suggested to use a new `routes` segment in the `app` or `pages` layer to work with Route Handlers.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В целом, я согласен с тобой, что есть польза в том, чтоб описать, куда мы предлагаем класть простенькие API-роуты, раз уж мы всю структуру перерыли. Давай может тогда вот так поступим:

  • уберем из рекомендаций предложение хранить их в pages — они не имеют отношения к страницам, пусть уж будут в app только
  • сделаем два код-блока в этой секции, первый в src/app/api-routes (мне больше нравится api-routes, потому что тогда не путаем с роутами, по которым находятся страницы), и в нем прямо полноценное описание функции-хендлера getExampleData. Внутри этой функции можем даже заюзать db из shared/db, чтоб продемонстрировать реюз коннекшна между роут-хендлерами и серверными компонентами
  • второй код-блок в app/api/example, и он реэкспортирует getExampleData as GET

```

## Dealing with App Router {#app-router}
### Functionality re-export from the public API `src/app/index.ts` to `pages/_app.tsx`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: это какая-то не очень понятная секция, без текста, только кодовый блок. Помимо этого, мне кажется, Steiger будет ругаться на индекс-файл в app, но я не уверен

suggestion: хочется найти какое-то более стабильное место кастомному компоненту App. При этом, не хочется выдумывать для него другие имена, которые не будут знакомы Next-разработчикам. Может, забить и просто предложить людям создать в слое app сегмент _app? Повторение, конечно, но зато сразу понятно всем, кто знают Pages Router. Альтернативно можно предложить custom-app

И давай заголовок этой секции сделаем вот такой:

Suggested change
### Functionality re-export from the public API `src/app/index.ts` to `pages/_app.tsx`
### Custom `_app` component

И чуть текста добавим, типа "You can place your Custom App component in src/app/_app or src/app/custom-app, и затем ниже привести опять же два код-блока — один с содержимым кастомного аппа, другой с реэкспортом в нужное место

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants