feat: add app routed pages

add app routed pages while preserving existing routes. re #64
ixartz · Jul 18, 2023 · 9cc79a0 · 9cc79a0
1 parent 13b8a08
commit 9cc79a0
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 3 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,42 @@
+import '../styles/global.css';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  icons: [
+    {
+      rel: 'apple-touch-icon',
+      url: '/apple-touch-icon.png',
+    },
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '32x32',
+      url: '/favicon-32x32.png',
+    },
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '16x16',
+      url: '/favicon-16x16.png',
+    },
+    {
+      rel: 'icon',
+      url: '/favicon.ico',
+    },
+  ],
+};
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/src/app/new-router/page.tsx b/src/app/new-router/page.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { Main } from '@/templates/Main';
+
+export const metadata: Metadata = {
+  title: 'New Router',
+  description:
+    'Incrementally migrate your existing application from pages to app',
+};
+
+const NewRouter = () => (
+  <Main>
+    <p>
+      Moving to the App Router may be the first time using React features that
+      Next.js builds on top of such as Server Components, Suspense, and more.
+      When combined with new Next.js features such as special files and layouts,
+      migration means new concepts, mental models, and behavioral changes to
+      learn.
+    </p>
+    <p>
+      We recommend reducing the combined complexity of these updates by breaking
+      down your migration into smaller steps. The app directory is intentionally
+      designed to work simultaneously with the pages directory to allow for
+      incremental page-by-page migration.{' '}
+      <Link href="https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app">
+        Learn more.
+      </Link>
+    </p>
+  </Main>
+);
+
+export default NewRouter;
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+
+import { Main } from '@/templates/Main';
+
+type Props = {
+  params: { slug: string };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `Porfolio ${slug}`,
+  };
+}
+
+const PortfolioDetail = ({ params }: Props) => (
+  <Main>
+    <h1 className="capitalize">Porfolio {params.slug}</h1>
+    <p>
+      Designed a series of promotional materials and branding assets for a
+      corporate event. Developed a visually cohesive theme, including a logo,
+      posters, banners, and digital assets. Incorporated the client&apos;s brand
+      identity while adding a fresh and modern touch. Received positive feedback
+      from event attendees and contributed to a successful event with increased
+      attendee participation and brand recognition.
+    </p>
+  </Main>
+);
+
+export default PortfolioDetail;
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
@@ -0,0 +1,47 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { Main } from '@/templates/Main';
+
+export const metadata: Metadata = {
+  title: 'Portfolio',
+  description: 'Welcome to my portfolio page!',
+};
+
+const Portfolio = () => (
+  <Main>
+    <p>
+      Welcome to my portfolio page! Here you will find a carefully curated
+      collection of my work and accomplishments. Through this portfolio, I aim
+      to showcase my expertise, creativity, and the value I can bring to your
+      projects.
+    </p>
+
+    <div className="container mx-auto mt-20 grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
+      {Array.from(Array(6).keys()).map((idx) => (
+        <div key={idx}>
+          <div className="overflow-hidden rounded-lg">
+            <div className="relative overflow-hidden pb-60">
+              <Link href={`/portfolio/${idx}`}>
+                <img
+                  className="absolute h-full w-full object-cover object-center"
+                  src="/assets/images/nextjs-starter-banner.png"
+                  alt=""
+                />
+              </Link>
+            </div>
+            <div className="relative bg-blue-200">
+              <div className="p-3">
+                <Link href={`/portfolio/${idx}`}>
+                  <h3 className="text-1xl font-bold">Portfolio {idx}</h3>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </Main>
+);
+
+export default Portfolio;
diff --git a/src/templates/Main.test.tsx b/src/templates/Main.test.tsx
@@ -4,12 +4,12 @@ import { Main } from './Main';
 
 describe('Main template', () => {
   describe('Render method', () => {
-    it('should have 3 menu items', () => {
+    it('should have 6 menu items', () => {
       render(<Main meta={null}>{null}</Main>);
 
       const menuItemList = screen.getAllByRole('listitem');
 
-      expect(menuItemList).toHaveLength(4);
+      expect(menuItemList).toHaveLength(6);
     });
 
     it('should have a link to support creativedesignsguru.com', () => {

diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 import { AppConfig } from '@/utils/AppConfig';
 
 type IMainProps = {
-  meta: ReactNode;
+  meta?: ReactNode;
   children: ReactNode;
 };
 
@@ -38,6 +38,22 @@ const Main = (props: IMainProps) => (
                 About
               </Link>
             </li>
+            <li className="mr-6">
+              <Link
+                href="/new-router/"
+                className="border-none text-gray-700 hover:text-gray-900"
+              >
+                New Router
+              </Link>
+            </li>
+            <li className="mr-6">
+              <Link
+                href="/portfolio/"
+                className="border-none text-gray-700 hover:text-gray-900"
+              >
+                Portfolio
+              </Link>
+            </li>
             <li className="mr-6">
               <a
                 className="border-none text-gray-700 hover:text-gray-900"