fix: fix a section in the Next.js guide and add an example (#699)

feature-sliced · Jul 24, 2024 · da2b6e6 · da2b6e6
1 parent 1b465f6
commit da2b6e6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -48,6 +48,7 @@ module.exports = {
         metadata: cfg.metadata,
 
         imageZoom: {
+            selector: ".markdown :not(a) > img",
             options: {
                 background: "rgb(255 255 255 / 0.3)",
             },

diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx b/i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx
@@ -92,21 +92,26 @@ To comply with the principles of FSD, you should treat the NextJS `app` folder i
 to resolve a conflict with the NextJS `pages` folder.
 
 The approach is to move the NextJS `app` folder to the root folder of the project and import the FSD pages into the NextJS `app` folder. This saves
-the FSD project structure inside the `src` folder.
+the FSD project structure inside the `src` folder. You should still also add the `pages` folder to the root, because the App router is compatible with the Pages router.
 
-```sh
+```
 ├── app                # NextJS app folder
+├── pages              # Stub NextJS pages folder
+│   ├── README.md      # Description of why this folder exists
 ├── src
 │   ├── app            # FSD app folder
 │   ├── entities
 │   ├── features
-│   ├── pages
+│   ├── pages          # FSD app folder
 │   ├── shared
 │   ├── widgets
 ```
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][ext-app-router-stackblitz]
+
 ## See also {#see-also}
 
 - [(Thread) About the pages directory in NextJS](https://t.me/feature_sliced/3623)
 
 [project-knowledge]: /docs/about/understanding/knowledge-types
+[ext-app-router-stackblitz]: https://stackblitz.com/edit/stackblitz-starters-aiez55?file=README.md 
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-nextjs.mdx
@@ -91,21 +91,26 @@ App Router стал стабильным в NextJS версии 13.4. App Router
 для устранения конфликта с папкой `pages` NextJS.
 
 Подход заключается в перемещении папки `app` NextJS в корневую папку проекта и импорте страниц FSD в папку `app` NextJS. Это сохраняет
-структуру проекта FSD внутри папки `src`.
+структуру проекта FSD внутри папки `src`. Вам также стоит добавить в корневую папку проекта папку `pages`, потому что App Router совместим с Pages Router.
 
-```sh
+```
 ├── app                # Папка app (NextJS)
+├── pages              # Пустая папка pages (NextJS)
+│   ├── README.md      # Описание того, зачем нужна эта папка
 ├── src
 │   ├── app            # Папка app (FSD)
 │   ├── entities
 │   ├── features
-│   ├── pages
+│   ├── pages          # Папка pages (FSD)
 │   ├── shared
 │   ├── widgets
 ```
 
+[![Открыть в StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][ext-app-router-stackblitz]
+
 ## См. также {#see-also}
 
 - [(Тред) Про pages директорию в NextJS](https://t.me/feature_sliced/3623)
 
 [project-knowledge]: /docs/about/understanding/knowledge-types
+[ext-app-router-stackblitz]: https://stackblitz.com/edit/stackblitz-starters-aiez55?file=README.md