npx create-next-app After that I added the support of app directory by adding
experimental : { appDir : true, } Finally, I got rid of the pages folder and created the app folder with the following structure:
-app --page.tsx --layout.tsx --head.tsx Contents of the newly created files:
layout.tsx
import Footer from "../ui/Footer"; import Header from "../ui/Header"; import '../styles/globals.css'; export default function Layout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body className="font-sans bg-gradient-to-b from-neutral-900 to-indigo-900"> <Header /> <main className="min-h-screen flex justify-center items-center flex-1 "> {children} </main> <Footer /> </body> </html> ); } page.tsx
import Card from "../ui/Card"; export default function Page() { return ( <div className="flex items-center justify-center flex-wrap large:max-w-2xl medium:max-w-md"> <Card title="JWT" logo="🌸" desc="Industry standard method for secure claim representation." /> </div> ); } head.tsx
export default function Head() { return ( <> <title>Authenticator</title> <meta name="description" content="A playground to explore different types of authentication/authorization using different services in educational purposes." key="description" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> </> ); } Will appreciate any feedback
