Add customization guide for next.js app router (#7316)

* docs: prepare structure for customization w/ app router

* docs: add logo and pre-header customizations to app router guide

* docs: add facet search on plp to the guide

* docs: fix next page links in pages router guide

* docs: add guide for brands page for app router

* docs: add custom field guide for app router

* docs: overriding normalizers in app router

* docs: overriding methods in app router

* docs: add social images feature to app router guide

* Update docs/content/guides/4.customization/1.index.md

Co-authored-by: Matt Maribojoc <mmaribojoc@vuestorefront.io>

* Update docs/content/guides/4.customization/1.pages-router/1.index.md

Co-authored-by: Matt Maribojoc <mmaribojoc@vuestorefront.io>

* Update docs/content/guides/4.customization/2.app-router/2.ui-customizations.md

Co-authored-by: Matt Maribojoc <mmaribojoc@vuestorefront.io>

* Update docs/content/guides/4.customization/2.app-router/2.ui-customizations.md

Co-authored-by: Matt Maribojoc <mmaribojoc@vuestorefront.io>

---------

Co-authored-by: Matt Maribojoc <mmaribojoc@vuestorefront.io>

docs/content/guides/4.customization/1.index.md

@@ -0,0 +1,22 @@
+---
+title: Alokai Customization Guide
+layout: default
+---
+
+# Alokai Customization Guide
+
+On this page, you'll find a set of guides that will help you understand some advanced concepts of Alokai and how to customize the application to your requirements. 
+
+::card{title="Alokai with Next.js pages router" icon="tabler:file" to="/guides/customization/pages-router" }
+
+#description
+Learn how to customize Alokai application with Next.js pages router.
+::
+
+<br />
+
+::card{title="Alokai with Next.js app router" icon="tabler:cube" to="/guides/customization/app-router" }
+
+#description
+Learn how to customize Alokai application with Next.js app router
+::

docs/content/guides/4.customization/1.pages-router/1.index.md

@@ -0,0 +1,51 @@
+---
+title: Alokai Customization Guide
+layout: default
+---
+
+# Alokai Customization Guide
+
+Alokai is not a cookie-cutter solution, it is meant to flexible enough to handle even the complex use cases. This guide will take you through the most common customization scenarios. We aim to cover end-to-end implementation of realistic business requirements.
+
+Some of the customizations you'll do throughout this guide are:
+
+::list{type="success"}
+- Customizing the logo image
+- Adjusting the theme colors
+- Inserting a pre-header
+- Implementing i18n (internationalization)
+- Modifying the look and feel of various components
+- Implementing a filter search feature
+- Creating a new page with a list of brands
+- Adding an "available for pickup" feature - add custom fields to our unified data model
+- Customizing the product slug to change the PDP URL
+- Fetching product reviews from an external service
+- Building a completely new feature from scratch. You will mock a "social product images" feature
+::
+
+::info
+Please bear in mind that this guide is not exhaustive - Alokai offers some more features that you can find in our
+documentation: <https://docs.alokai.com/>.
+::
+
+
+## Prerequisites
+
+This guide assumes that:
+
+- you've gone through the [Alokai Next.js guide](/guides/alokai-essentials/alokai-next-js).
+- you have access to [Alokai Enterprise](https://docs.alokai.com/enterprise)
+- you have an Alokai starter project provided by the Alokai team
+- you have access to SAP Commerce Cloud OCC API instance (you can use our demo instance)
+
+
+::card{title="Next: UI Customization" icon="tabler:number-1-small" }
+
+#description
+Learn how to customize Alokai User Interface.
+
+#cta
+:::docs-button{to="/guides/customization/pages-router/ui-customizations"}
+Start Customizing
+:::
+::

docs/content/guides/4.customization-next-js/2.ui-customizations.md → docs/content/guides/4.customization/1.pages-router/2.ui-customizations.md

@@ -398,7 +398,7 @@ If you want to get access to it, contact our [sales team](https://docs.alokai.co
 Learn how to create a custom Alokai page.
 
 #cta
-:::docs-button{to="/guides/customization-next-js/brands-page"}
+:::docs-button{to="/guides/customization/pages-router/brands-page"}
 Create a new page
 :::
 ::

docs/content/guides/4.customization-next-js/3.brands-page.md → docs/content/guides/4.customization/1.pages-router/3.brands-page.md

@@ -239,7 +239,7 @@ If you want to get access to it, contact our [sales team](https://docs.alokai.co
 Learn how to add custom fields to the Unified Data Model
 
 #cta
-:::docs-button{to="/guides/customization-next-js/add-custom-field"}
+:::docs-button{to="/guides/customization/pages-router/add-custom-field"}
 Customize UDL
 :::
 ::

docs/content/guides/4.customization-next-js/4.add-custom-field.md → docs/content/guides/4.customization/1.pages-router/4.add-custom-field.md

@@ -70,7 +70,7 @@ If you want to get access to it, contact our [sales team](https://docs.alokai.co
 Learn how to override normalizers.
 
 #cta
-:::docs-button{to="/guides/customization-next-js/changing-product-slug"}
+:::docs-button{to="/guides/customization/pages-router/changing-product-slug"}
 Next
 :::
 ::

docs/content/guides/4.customization-next-js/5.changing-product-slug.md → docs/content/guides/4.customization/1.pages-router/5.changing-product-slug.md

@@ -120,7 +120,7 @@ Read more about normalizers here: https://docs.alokai.com/storefront/unified-dat
 Learn how to call a 3rd party back-end service and replace OOTB API method.
 
 #cta
-:::docs-button{to="/guides/customization-next-js/method-overriding"}
+:::docs-button{to="/guides/customization/pages-router/method-overriding"}
 Next
 :::
 ::

docs/content/guides/4.customization-next-js/6.method-overriding.md → docs/content/guides/4.customization/1.pages-router/6.method-overriding.md

@@ -92,7 +92,7 @@ If you want to get access to it, contact our [sales team](https://docs.alokai.co
 Learn how to implement a custom feature by creating an extension.
 
 #cta
-:::docs-button{to="/guides/customization-next-js/adding-extension"}
+:::docs-button{to="/guides/customization/pages-router/adding-extension"}
 Next
 :::
 ::

docs/content/guides/4.customization/1.pages-router/_dir.yml

@@ -0,0 +1,5 @@
+title: Next.js pages router
+sidebarRoot: true
+navigation:
+  icon: tabler:file
+

docs/content/guides/4.customization-next-js/1.index.md → docs/content/guides/4.customization/2.app-router/1.index.md

@@ -45,7 +45,7 @@ This guide assumes that:
 Learn how to customize Alokai User Interface.
 
 #cta
-:::docs-button{to="/guides/customization-next-js/ui-customizations"}
+:::docs-button{to="/guides/customization/app-router/ui-customizations"}
 Start Customizing
 :::
 ::