chore: reorganize docs apps (#7228)

* reorganize docs apps

* add README

* fix directory

* add condition for old docs

www/apps/book/app/storefront-development/nextjs-starter/page.mdx

@@ -0,0 +1,67 @@
+export const metadata = {
+  title: `${pageNumber} Next.js Starter`,
+}
+
+# {metadata.title}
+
+In this chapter, you’ll learn how to install and use the Next.js Starter storefront.
+
+<Note title="Demo">
+
+Check out the demo [here](https://next.medusajs.com/).
+
+</Note>
+
+## Install Next.js Starter
+
+<Note type="check">
+
+- [Node v18+](https://nodejs.org/en/)
+- At least one region in the Medusa application.
+
+</Note>
+
+1. Create a Next.js project using the [Next.js Starter’s repository URL](https://github.com/medusajs/nextjs-starter-medusa):
+
+```bash
+npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
+```
+
+2. Change to the `my-medusa-storefront` directory and rename the template environment variable:
+
+```bash
+cd my-medusa-storefront
+mv .env.template .env.local
+```
+
+3. While the Medusa application is running, start the Next.js storefront:
+
+```bash npm2yarn
+npm run dev
+```
+
+Your Next.js Starter Storefront is now running at `localhost:8000`.
+
+---
+
+## Customize Storefront
+
+To customize the storefront, refer to the following directories:
+
+- `src/app`: The storefront’s pages.
+- `src/modules`: The storefront’s components.
+- `src/styles`: The storefront’s styles.
+
+<Note title="Tip">
+
+You can learn more about development with Next.js through [their documentation](https://nextjs.org/docs/getting-started).
+
+</Note>
+
+---
+
+## Configurations and Compatible Plugins
+
+The Next.js Starter is compatible with some Medusa plugins out-of-the-box, such as the MeiliSearch or Stripe plugins. You can also change some of its configurations if necessary.
+
+Refer to the Next.js Starter reference for more details.

www/apps/book/app/storefront-development/page.mdx

@@ -0,0 +1,13 @@
+export const metadata = {
+  title: `${pageNumber} Storefront Development`,
+}
+
+# {metadata.title}
+
+In the next chapters, you’ll learn about building a storefront for your Medusa backend.
+
+## Storefronts in Medusa’s Architecture
+
+Storefronts are built separately from the Medusa application. They interact with the Medusa application through the Store API Routes.
+
+You have full freedom in how you choose to build your storefront. You can start with our Next.js starter storefront or build a storefront from scratch using your preferred framework or tech stack. Both of these approaches are explained in the next chapters.

www/apps/book/app/storefront-development/tips/page.mdx

@@ -0,0 +1,67 @@
+export const metadata = {
+  title: `${pageNumber} Storefront Development Tips`,
+}
+
+# {metadata.title}
+
+In this chapter, you’ll find tips to help you build a storefront.
+
+## Connect to the Medusa Application
+
+<Note type="soon">
+
+Support for Medusa v2 in Medusa React and the JS Client is coming soon.
+
+</Note>
+
+To send requests from the storefront to the Medusa application’s Store API Routes, you have three options:
+
+- **For React-based storefronts**: use Medusa React. It provides you with the necessary hooks to retrieve or manipulate data from your Medusa application.
+- **For JavaScript frameworks**: use Medusa’s JavaScript Client in any JavaScript framework. This NPM package facilitates interacting with the backend’s REST APIs.
+- **For other frontend technologies**:  interact directly with the Medusa application by sending requests to its [Store REST APIs](https://docs.medusajs.com/api/store).
+
+---
+
+## Configure CORS
+
+The Medusa application’s API routes are guarded by a CORS middleware. Make sure to set the `store_cors` configuration of your Medusa application to the storefront’s URL.
+
+For example:
+
+```js title="medusa-config.js"
+module.exports = {
+  projectConfig: {
+    store_cors: "http://localhost:3000",
+    // ...
+  },
+  // ...
+}
+```
+
+---
+
+## Use Publishable API Keys
+
+Publishable API keys specify the scope of a request. Admin users create them, and they can only be used on the client-side, such as in a storefront.
+
+Publishable API keys are associated with sales channels. Then, when the publishable API key is passed in the header of a request, the Medusa application automatically infers what sales channel is being used.
+
+<Note>
+
+Products, carts, and orders are associated with a sales channel. If you don’t specify a sales channel or a publishable API key, the products, carts, and orders are associated with the default sales channel.
+
+</Note>
+
+### Create a Publishable API Key
+
+You can create a publishable API key using either the [Medusa Admin dashboard](https://docs.medusajs.com/user-guide/settings/publishable-api-keys) or the [Admin API Routes](https://docs.medusajs.com/api/admin#publishable-api-keys).
+
+### Use the Publishable API Key
+
+Refer to the [Store API Reference](https://docs.medusajs.com/api/store#publishable-api-key) to learn how to use the publishable API key in your requests.
+
+---
+
+## Implement Commerce Functionalities
+
+Refer to the [Commerce Modules reference](!resources!/commerce-modules) for how-to guides on common commerce functionalities.