diff --git a/www/apps/book/app/learn/storefront-development/nextjs-starter/page.mdx b/www/apps/book/app/learn/storefront-development/nextjs-starter/page.mdx
index f0518e0060..84ee8bfeaf 100644
--- a/www/apps/book/app/learn/storefront-development/nextjs-starter/page.mdx
+++ b/www/apps/book/app/learn/storefront-development/nextjs-starter/page.mdx
@@ -1,12 +1,16 @@
 import { Prerequisites } from "docs-ui"
 
 export const metadata = {
-  title: `${pageNumber} Next.js Starter`,
+  title: `${pageNumber} Next.js Starter Storefront`,
 }
 
 # {metadata.title}
 
-In this chapter, you’ll learn how to install and use the Next.js Starter storefront.
+The Medusa application is made up of a Node.js server and an admin dashboard. The storefront is installed and hosted separately from the Medusa application, giving you the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience.
+
+The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or build on top of it to tailor it for the business's unique use case, design, and customer experience.
+
+In this chapter, you’ll learn how to install the Next.js Starter storefront separately from the Medusa application. You can also install it while installing the Medusa application as explained in [the installation chapter](../../installation/page.mdx).
 
 ## Install Next.js Starter
 
@@ -15,18 +19,24 @@ In this chapter, you’ll learn how to install and use the Next.js Starter store
     text: "Node.js v20+",
     link: "https://nodejs.org/en/download"
   },
+  {
+    text: "Git CLI tool",
+    link: "https://git-scm.com/downloads"
+  },
   {
     text: "At least one region in the Medusa application.",
   },
 ]} />
 
-1. Clone the `v2` branch of the [Next.js Starter](https://github.com/medusajs/nextjs-starter-medusa):
+If you already have a Medusa application installed with at least one region, you can install the Next.js Starter storefront with the following steps:
+
+1. Clone the [Next.js Starter](https://github.com/medusajs/nextjs-starter-medusa):
 
 ```bash
 git clone https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
 ```
 
-2. Change to the `my-medusa-storefront` directory, install the dependencies, and rename the template environment variable:
+2. Change to the `my-medusa-storefront` directory, install the dependencies, and rename the template environment variable file:
 
 ```bash npm2yarn
 cd my-medusa-storefront
@@ -34,13 +44,19 @@ npm install
 mv .env.template .env.local
 ```
 
-3. While the Medusa application is running, start the Next.js storefront:
+3. Set the Medusa application's publishable API key in the `NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY` environment variable. You can retrieve the publishable API key in on the Medusa Admin dashboard by going to Settings -> Publishable API Keys
+
+```bash
+NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_123...
+```
+
+4. While the Medusa application is running, start the Next.js Starter storefront:
 
 ```bash npm2yarn
 npm run dev
 ```
 
-Your Next.js Starter Storefront is now running at `localhost:8000`.
+Your Next.js Starter storefront is now running at `http://localhost:8000`.
 
 ---
 
diff --git a/www/apps/book/app/learn/storefront-development/page.mdx b/www/apps/book/app/learn/storefront-development/page.mdx
index 14bc0e2fe9..d83a5a46e7 100644
--- a/www/apps/book/app/learn/storefront-development/page.mdx
+++ b/www/apps/book/app/learn/storefront-development/page.mdx
@@ -1,18 +1,27 @@
+import { CardList } from "docs-ui"
+
 export const metadata = {
   title: `${pageNumber} Storefront Development`,
 }
 
 # {metadata.title}
 
-Storefronts are built separately from the Medusa application. They interact with the Medusa application through the Store API routes.
+The Medusa application is made up of a Node.js server and an admin dashboard. Storefronts are installed, built, and hosted separately from the Medusa application, giving you the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience.
 
-You're free to choose how to build your storefront. You can start with our Next.js starter storefront, as explained in the next chapter, or build a storefront from scratch using your preferred framework or tech stack.
+You can build your storefront from scratch with your preferred tech stack, or start with our Next.js Starter storefront. The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or build on top of it to tailor it for the business's unique use case, design, and customer experience.
 
-<Note title="Tip">
-
-To learn how to build a storefront from scratch, check out the [Storefront Development guides](!resources!/storefront-development).
-
-</Note>
+<CardList
+  items={[
+    {
+      text: "Install Next.js Starter Storefront",
+      href: "!resources!/nextjs-starter"
+    },
+    {
+      text: "Build Custom Storefront",
+      href: "!resources!/storefront-development"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/www/apps/book/generated/edit-dates.mjs b/www/apps/book/generated/edit-dates.mjs
index de0134b068..91911b8aa6 100644
--- a/www/apps/book/generated/edit-dates.mjs
+++ b/www/apps/book/generated/edit-dates.mjs
@@ -8,8 +8,8 @@ export const generatedEditDates = {
   "app/learn/fundamentals/workflows/workflow-hooks/page.mdx": "2024-12-09T10:44:33.781Z",
   "app/learn/debugging-and-testing/logging/page.mdx": "2024-09-30T08:43:53.135Z",
   "app/learn/more-resources/page.mdx": "2024-07-04T17:26:03+03:00",
-  "app/learn/storefront-development/page.mdx": "2024-09-11T10:58:59.290Z",
-  "app/learn/storefront-development/nextjs-starter/page.mdx": "2024-07-04T17:26:03+03:00",
+  "app/learn/storefront-development/page.mdx": "2024-12-10T09:11:04.993Z",
+  "app/learn/storefront-development/nextjs-starter/page.mdx": "2024-12-10T09:05:18.960Z",
   "app/learn/fundamentals/page.mdx": "2024-07-04T17:26:03+03:00",
   "app/learn/fundamentals/admin-customizations/page.mdx": "2024-10-07T12:41:39.218Z",
   "app/learn/fundamentals/workflows/workflow-timeout/page.mdx": "2024-10-21T13:30:21.372Z",
diff --git a/www/apps/book/sidebar.mjs b/www/apps/book/sidebar.mjs
index e188f3a7ee..3c67016984 100644
--- a/www/apps/book/sidebar.mjs
+++ b/www/apps/book/sidebar.mjs
@@ -479,13 +479,6 @@ export const sidebar = numberSidebarItems(
       path: "/learn/storefront-development",
       title: "Storefront Development",
       chapterTitle: "Storefront",
-      children: [
-        {
-          type: "link",
-          path: "/learn/storefront-development/nextjs-starter",
-          title: "Next.js Starter",
-        },
-      ],
     },
     {
       type: "link",
diff --git a/www/apps/book/utils/redirects.mjs b/www/apps/book/utils/redirects.mjs
index 53416e6c68..6ca409048d 100644
--- a/www/apps/book/utils/redirects.mjs
+++ b/www/apps/book/utils/redirects.mjs
@@ -103,6 +103,11 @@ const redirects = async () => {
       destination: "/learn/fundamentals/:path*",
       permanent: true,
     },
+    {
+      source: "/learn/storefront-development/nextjs-starter",
+      destination: "/resources/nextjs-starter",
+      permanent: true,
+    },
   ]
 }
 
diff --git a/www/apps/resources/app/nextjs-starter/page.mdx b/www/apps/resources/app/nextjs-starter/page.mdx
index 76ebe35655..6762e00dba 100644
--- a/www/apps/resources/app/nextjs-starter/page.mdx
+++ b/www/apps/resources/app/nextjs-starter/page.mdx
@@ -4,24 +4,63 @@ import CorsErrorTroubleshooting from "../troubleshooting/_sections/other/cors-er
 import ModuleXErrorTroubleshooting from "../troubleshooting/_sections/common-installation-errors/module-x-error.mdx"
 
 export const metadata = {
-  title: `Next.js Starter`,
+  title: `Next.js Starter Storefront`,
 }
 
 # {metadata.title}
 
-The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or as a starting point to build a storefront for their Medusa application.
+The Medusa application is made up of a Node.js server and an admin dashboard. The storefront is installed and hosted separately from the Medusa application. You have the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience.
+
+Our Next.js Starter is a good place to start building your storefront. The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or build on top of it to tailor it for the business's unique use case, design, and customer experience.
+
+## Installation
+
+### Approach 1: Install with Medusa Application
 
 <Prerequisites items={[
   {
     text: "Node.js v20+",
     link: "https://nodejs.org/en/download"
   },
+  {
+    text: "Git CLI tool",
+    link: "https://git-scm.com/downloads"
+  },
+  {
+    text: "PostgreSQL",
+    link: "https://www.postgresql.org/download/"
+  }
+]} />
+
+If you don't have a Medusa application installed, run the following command to install both the Medusa application and the Next.js Starter storefront:
+
+```bash
+npx create-medusa-app@latest --with-nextjs-starter
+```
+
+You'll be asked for the project's name, then the installation will start. The Medusa application will be installed in the `{project-name}` directory, and the Next.js will be installed in a separate `{project-name}-storefront` directory.
+
+Once the installation is done, the Medusa Admin dashboard will open in your default browser at `http://localhost:9000/app`, and the Next.js Starter storefront will be running at `http://localhost:8000`.
+
+For other information related to the Medusa application's installation, refer to [this documentation](!docs!/learn/installation).
+
+### Approach 2: Install separately
+
+<Prerequisites items={[
+  {
+    text: "Node.js v20+",
+    link: "https://nodejs.org/en/download"
+  },
+  {
+    text: "Git CLI tool",
+    link: "https://git-scm.com/downloads"
+  },
   {
     text: "At least one region in the Medusa application.",
   },
 ]} />
 
-## Installation
+If you already have a Medusa application installed with at least one region, you can install the Next.js Starter storefront with the following steps:
 
 1. Clone the [Next.js Starter](https://github.com/medusajs/nextjs-starter-medusa):
 
@@ -29,7 +68,7 @@ The Next.js Starter storefront provides rich commerce features and a sleek desig
 git clone https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
 ```
 
-2. Change to the `my-medusa-storefront` directory, install the dependencies, and rename the template environment variable:
+2. Change to the `my-medusa-storefront` directory, install the dependencies, and rename the template environment variable file:
 
 ```bash npm2yarn
 cd my-medusa-storefront
@@ -37,13 +76,19 @@ npm install
 mv .env.template .env.local
 ```
 
-3. While the Medusa application is running, start the Next.js storefront:
+3. Set the Medusa application's publishable API key in the `NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY` environment variable. You can retrieve the publishable API key in on the Medusa Admin dashboard by going to Settings -> Publishable API Keys
+
+```bash
+NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_123...
+```
+
+4. While the Medusa application is running, start the Next.js Starter storefront:
 
 ```bash npm2yarn
 npm run dev
 ```
 
-Your Next.js Starter Storefront is now running at `localhost:8000`.
+Your Next.js Starter storefront is now running at `http://localhost:8000`.
 
 ---
 
@@ -52,7 +97,7 @@ Your Next.js Starter Storefront is now running at `localhost:8000`.
 <DetailsList
   sections={[
     {
-      title: "Next.js storefront not working using option 1",
+      title: "Installing Next.js Starter with create-medusa-app not working",
       content: <CmaOptionTroubleshooting />
     },
     {
@@ -68,13 +113,13 @@ Your Next.js Starter Storefront is now running at `localhost:8000`.
 
 ## Payment Providers
 
-The Next.js Starter storefront is compatible with Medusa's Stripe and PayPal plugins.
-
 ### Stripe Integration
 
+The Next.js Starter storefront is compatible with Medusa's Stripe Module Provider.
+
 <Prerequisites items={[
   {
-    text: "Stripe module provider installed in the Medusa application.",
+    text: "Stripe Module Provider installed in the Medusa application.",
     link: "../commerce-modules/payment/payment-provider/stripe/page.mdx"
   },
 ]} />
@@ -100,3 +145,15 @@ To change the URL of the Medusa application in the storefront, set the `NEXT_PUB
 ```bash
 NEXT_PUBLIC_MEDUSA_BACKEND_URL=https://example.com
 ```
+
+---
+
+## Change Medusa Publishable API Key
+
+All requests made from a storefront must pass a publishable API key in the request's header. This API key is created in the Medusa application. If you've installed the Next.js Starter storefront using `create-medusa-app`, the publishable API key is set in the environment variables automatically.
+
+If you change your Medusa application or its database, or you lose the publishable API key you had before, make sure to change the `NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY` environment variable to the new publishable API key:
+
+```bash
+NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_123...
+```
diff --git a/www/apps/resources/app/troubleshooting/_sections/common-installation-errors/module-x-error.mdx b/www/apps/resources/app/troubleshooting/_sections/common-installation-errors/module-x-error.mdx
index 625a124768..1fb783046a 100644
--- a/www/apps/resources/app/troubleshooting/_sections/common-installation-errors/module-x-error.mdx
+++ b/www/apps/resources/app/troubleshooting/_sections/common-installation-errors/module-x-error.mdx
@@ -1,6 +1,6 @@
 import { CodeTabs, CodeTab } from "docs-ui"
 
-This error can occur while installing any of Medusa's projects (for example, Next.js Starter Template). There is no specific cause to this error.
+This error can occur while installing any of Medusa's projects (for example, Next.js Starter storefront). There is no specific cause to this error.
 
 One way to resolve it is by removing the `node_modules` directory in the project and re-installing the dependencies:
 
diff --git a/www/apps/resources/generated/edit-dates.mjs b/www/apps/resources/generated/edit-dates.mjs
index 2f2accfdf7..ad3d8eb40c 100644
--- a/www/apps/resources/generated/edit-dates.mjs
+++ b/www/apps/resources/generated/edit-dates.mjs
@@ -123,7 +123,7 @@ export const generatedEditDates = {
   "app/medusa-cli/page.mdx": "2024-08-28T11:25:32.382Z",
   "app/medusa-container-resources/page.mdx": "2024-12-09T16:18:38.852Z",
   "app/medusa-workflows-reference/page.mdx": "2024-12-09T16:22:32.129Z",
-  "app/nextjs-starter/page.mdx": "2024-07-01T10:21:19+03:00",
+  "app/nextjs-starter/page.mdx": "2024-12-10T08:44:33.783Z",
   "app/recipes/b2b/page.mdx": "2024-10-03T13:07:44.153Z",
   "app/recipes/commerce-automation/page.mdx": "2024-10-16T08:52:01.585Z",
   "app/recipes/digital-products/examples/standard/page.mdx": "2024-12-09T16:18:45.973Z",
diff --git a/www/apps/resources/generated/sidebar.mjs b/www/apps/resources/generated/sidebar.mjs
index 6491cb9aa5..311cb88e30 100644
--- a/www/apps/resources/generated/sidebar.mjs
+++ b/www/apps/resources/generated/sidebar.mjs
@@ -9137,7 +9137,7 @@ export const generatedSidebar = [
         "isPathHref": true,
         "type": "link",
         "path": "/nextjs-starter",
-        "title": "Next.js Starter",
+        "title": "Next.js Starter Storefront",
         "children": []
       }
     ]
diff --git a/www/apps/resources/sidebar.mjs b/www/apps/resources/sidebar.mjs
index 34466cabac..7793db3da8 100644
--- a/www/apps/resources/sidebar.mjs
+++ b/www/apps/resources/sidebar.mjs
@@ -2143,7 +2143,7 @@ export const sidebar = sidebarAttachHrefCommonOptions([
       {
         type: "link",
         path: "/nextjs-starter",
-        title: "Next.js Starter",
+        title: "Next.js Starter Storefront",
       },
     ],
   },