Next.js 13 App Directory

[theodorusclarence]

Hi!

Due to the app directory is still in beta, I won't migrate the starter. I will immediately migrate it after the appDir is stable and out of beta 👍. The same goes for next-font.

Otherwise, the new Image and Link component is already migrated.

Thanks for using this starter!

[ShuibCodes]

appreciate u man!

[Chandraprakash-Darji]

Thanks for the amazing template. Highly appreciated.

[v-limo]

Next 13 is now stable. Please update the template. Thanks for the awesome template 👌
@theodorusclarence

[theodorusclarence]

Next 13 is now stable. Please update the template. Thanks for the awesome template 👌 @theodorusclarence

Yes! Currently reading the docs to decide the best way to migrate 😃

[Chandraprakash-Darji]

Can I help out?

[theodorusclarence]

Can I help out?

Coding wise it's all good for now, I'm currently making consideration for migrating Seo components.

https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/7a662d02feaa8dfbc8c4fcf61f624e501f6ddf79/src/components/Seo.tsx#LL51C7-L51C73

we use router.pathname for some of the properties, but I haven't find resource yet to add them to generateMetadata function. Any ideas?

[adham618]

you can use this in layout.tsx file

`import { Metadata } from "next";
import { Nunito } from "next/font/google";

import "../styles/globals.css";

import Header from "@/components/Layout/Header";

import { siteConfig } from "@/config/site";

const nunito = Nunito({ subsets: ["latin"] });

export const metadata: Metadata = {
title: {
default: siteConfig.name,
template: %s - ${siteConfig.name},
},
description: siteConfig.description,
applicationName: siteConfig.name,
generator: Next.js,
viewport: "width=device-width, initial-scale=1.0",
keywords: [
"Next.js",
"React",
"Tailwind CSS",
"Server Components",
],
authors: [
{
name: "test",
url: "https://test.com",
},
],
creator: "Adham Tarek",
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
openGraph: {
type: "website",
locale: "en_US",
url: siteConfig.url,
title: siteConfig.name,
description: siteConfig.description,
siteName: siteConfig.name,
images: [
{
url: siteConfig.ogImage,
width: 1200,
height: 630,
alt: siteConfig.name,
},
],
},
twitter: {
card: "summary_large_image",
title: siteConfig.name,
description: siteConfig.description,
images: [siteConfig.ogImage],
creator: "@test",
},
icons: {
icon: "/favicon.ico",
shortcut: "/favicon/favicon-16x16.png",
apple: "/favicon/apple-touch-icon.png",
},
manifest: ${siteConfig.url}/favicon/site.webmanifest,
other: {
icon: "/favicon/favicon-32x32.png",
"mask-icon": "/favicon/safari-pinned-tab.svg",
"msapplication-TileColor": "#ffffff",
"msapplication-TileImage": "/favicon/mstile-150x150.png",
"msapplication-config": "/favicon/browserconfig.xml",
},
robots: "index, follow",
// verification: {
// google: "1234567890",
// yandex: "1234567890",
// },
};

export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {

return (

{children}



);
}`

siteConfig file

`export const site config = {
name: "siteName",
url: "https://site.com",
ogImage: "https://site.com/images/og.jpg",
description: "description",
links: {
twitter: "https://twitter.com/",
github: "https://github.com/",
},
};

export type SiteConfig = typeof siteConfig;`

[theodorusclarence]

@adham618 how about the router.pathname? I think it's not supported by Next.js

The SEO component will most likely have a different behavior after the Next.js App Dir. It's pretty much done, I'm currently writing the changelog because some feature (like svg, automatic open graph from Seo) has been dropped due to the limitation.

[Chandraprakash-Darji]

@theodorusclarence

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
};
 
export default function Page() {}

can't we export function return here?

ref: https://nextjs.org/docs/app/api-reference/functions/generate-metadata

[Chandraprakash-Darji]

Also we can make opengraph component also

Each file convention can be defined using a static file (e.g. app/opengraph-image.jpg), or a dynamic variant that uses code to generate the file (e.g. app/opengraph-image.js).

ref: https://nextjs.org/docs/app/api-reference/file-conventions/metadata#file-based-metadata

[czSMiLE]

@theodorusclarence any update man?

[theodorusclarence]

@theodorusclarence any update man?

I was quite occupied with my college thesis, it’s now finished. I will work on the app router again soon 🙌

[theodorusclarence]

Forgot to let you guys know, it's done!

#240
#241