Merge pull request #135 from medusajs/feat/app-router-vic

feat: migrate to app router

Author: VariableVic

.env.template

@@ -1,6 +1,12 @@
 # Your Medusa backend, should be updated to where you are hosting your server. Remember to update CORS settings for your server. See – https://docs.medusajs.com/usage/configurations#storefront-cors
 NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000
 
+# Your store URL, should be updated to where you are hosting your storefront.
+NEXT_PUBLIC_BASE_URL=http://localhost:8000
+
+# Posgres URL for your Medusa DB for the Product Module. See - https://docs.medusajs.com/modules/products/serverless-module
+PRODUCT_POSTGRES_URL=postgres://postgres:postgres@localhost:5432/medusa-store
+
 # Your Stripe public key. See – https://docs.medusajs.com/add-plugins/stripe
 NEXT_PUBLIC_STRIPE_KEY=
 
@@ -11,4 +17,4 @@ NEXT_PUBLIC_PAYPAL_CLIENT_ID=
 NEXT_PUBLIC_SEARCH_APP_ID=
 NEXT_PUBLIC_SEARCH_ENDPOINT=http://127.0.0.1:7700
 NEXT_PUBLIC_SEARCH_API_KEY=
-NEXT_PUBLIC_SEARCH_INDEX_NAME=products
+NEXT_PUBLIC_SEARCH_INDEX_NAME=products

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -2,10 +2,17 @@ const { withStoreConfig } = require("./store-config")
 const store = require("./store.config.json")
 
 module.exports = withStoreConfig({
+  experimental: {
+    serverActions: true,
+  },
   features: store.features,
   reactStrictMode: true,
   images: {
-    domains: ["medusa-public-images.s3.eu-west-1.amazonaws.com", "localhost"],
+    domains: [
+      "medusa-public-images.s3.eu-west-1.amazonaws.com",
+      "localhost",
+      "medusa-server-testing.s3.amazonaws.com",
+    ],
   },
 })
 

src/app/account/addresses/layout.tsx

@@ -0,0 +1,9 @@
+import AccountLayout from "@modules/account/templates/account-layout"
+
+export default function AddressPageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <AccountLayout>{children}</AccountLayout>
+}

src/app/account/addresses/page.tsx

@@ -0,0 +1,11 @@
+import AddressesTemplate from "@modules/account/templates/addresses-template"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Addresses",
+  description: "View your addresses",
+}
+
+export default function Addresses() {
+  return <AddressesTemplate />
+}

src/app/account/layout.tsx

@@ -0,0 +1,9 @@
+import PageLayout from "app/page-layout"
+
+export default function AccountPageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <PageLayout>{children}</PageLayout>
+}

src/app/account/login/page.tsx

@@ -0,0 +1,11 @@
+import LoginTemplate from "@modules/account/templates/login-template"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  description: "Sign in to your ACME account.",
+}
+
+export default function Login() {
+  return <LoginTemplate />
+}

src/app/account/orders/layout.tsx

@@ -0,0 +1,9 @@
+import AccountLayout from "@modules/account/templates/account-layout"
+
+export default function OrdersPageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <AccountLayout>{children}</AccountLayout>
+}

src/app/account/orders/page.tsx

@@ -0,0 +1,11 @@
+import OrdersTemplate from "@modules/account/templates/orders-template"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Orders",
+  description: "Overview of your previous orders..",
+}
+
+export default function Orders() {
+  return <OrdersTemplate />
+}

src/app/account/page.tsx

@@ -0,0 +1,16 @@
+import AccountLayout from "@modules/account/templates/account-layout"
+import OverviewTemplate from "@modules/account/templates/overview-template"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Account",
+  description: "Overview of your account activity.",
+}
+
+export default function Account() {
+  return (
+    <AccountLayout>
+      <OverviewTemplate />
+    </AccountLayout>
+  )
+}