diff --git a/my-first-next-app/app/about/page.tsx b/my-first-next-app/app/about/page.tsx new file mode 100755 index 0000000..99d9009 --- /dev/null +++ b/my-first-next-app/app/about/page.tsx @@ -0,0 +1,8 @@ +export default function AboutPage() { + return ( +
+

This is about page.

+

This is powered by Next.js

+
+ ) +} \ No newline at end of file diff --git a/my-first-next-app/app/blog/[id]/page.tsx b/my-first-next-app/app/blog/[id]/page.tsx new file mode 100755 index 0000000..4561c62 --- /dev/null +++ b/my-first-next-app/app/blog/[id]/page.tsx @@ -0,0 +1,9 @@ +interface BlogPostProps { + params: { + id: string; + }; +} + +export default async function BlogPost({ params }: BlogPostProps) { + return

Blog.Write ID: {params.id}

; +} \ No newline at end of file diff --git a/my-first-next-app/app/layout.tsx b/my-first-next-app/app/layout.tsx index f7fa87e..abd08fa 100755 --- a/my-first-next-app/app/layout.tsx +++ b/my-first-next-app/app/layout.tsx @@ -1,20 +1,9 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "My First Next App", + description: "Learn Front Using Next.js", }; export default function RootLayout({ @@ -23,11 +12,16 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - {children} + + +
+ +
+
+ {children} +
); diff --git a/my-first-next-app/app/page.tsx b/my-first-next-app/app/page.tsx index 88f0cc9..c589e49 100755 --- a/my-first-next-app/app/page.tsx +++ b/my-first-next-app/app/page.tsx @@ -1,103 +1,13 @@ import Image from "next/image"; +import Link from "next/link"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+
+

Main Page

+ Go About Page using a tag. +

+ Go About Page using Link tag. +
); }