Create Project

create app ("next": "15.2.1") : 
npx create-next-app@latest 
What is your project named?  Project Name 
Would you like to use TypeScript?  No / Yes 
Would you like to use ESLint?  No / Yes 
Would you like to use Tailwind CSS?  No / Yes 
Would you like your code inside a `src/` directory?  No / Yes 
Would you like to use App Router? (recommended)  No / Yes 
Would you like to use Turbopack for `next dev`?  No / Yes 
Would you like to customize the import alias (`@/*` by default)?  No / Yes
mui installation : 
npm install @mui/material @emotion/react @emotion/styled
mui icon : 
npm install @mui/icons-material
mui App Router : 
npm install @mui/material-nextjs
sass/scss : 
npm i sass

folder Project 
├── public 
│       ├── img 
│       ├── og1200x630.jpg 
│       └── tw800x418.jpg 
└── src 
│       ├── app
│       │      ├── (page) 
│       │      │     ├──layout.tsx (if) 
│       │      │     └──page.tsx 
│       │      ├── layout.tsx (Setting Main Project) 
│       │      └── page.tsx 
│       ├── assets 
│       │      ├── font 
│       │      │     ├── feather (font icon)
│       │      │     ├── fontawesome (font icon)
│       │      │     ├── icon-custom (font icon)
│       │      │     └── ...(if)
│       │      └── scss 
│       │               ├── components 
│       │               ├── configs 
│       │               │     ├── _base.scss (settings default app)
│       │               │     ├── _fonts.scss (settings fontFamily)
│       │               │     └── _variable.scss (settings text, color, ... etc.) 
│       │               ├── layouts
│       │               ├── libs
│       │               └── modules
│       ├── components 
│       │       ├── ui (import ui) 
│       │       ├── lazy (for pagespeed) 
│       │       ├── layouts (setting ui) 
│       │       │       └── config.layout.tsx (setting theme mui) 
│       │       └── ...(if) 
│       ├── constant (variable)
│       ├── providers (suspense)
│       ├── store (state)
│       ├── types (types)
│       └── utils (function)
├── next.config.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── ...orther

path : 
[ folder Project ] > [ src ] > [ app ] > layout.tsx

import : meta data
import : type { Metadata } from "next"; 
export const metadata: Metadata = {
      title: "page title",
      description: "page description",
      keywords: "page keywords",
      metadataBase: new URL("http://localhost:3000/"),
      openGraph : {
            images: "/og1200x630.jpg",
            url: "/",
            type: "website",
      },
      twitter : {
            card: "summary",
            siteId: "@WWP",
            creator: "@WWP",
            images: "/tw800x418.jpg",
      },
      referrer: "origin-when-cross-origin",
      alternates : {
            canonical: "http://localhost:3000/",
      },
      formatDetection : {
            telephone: false,
      },
      icons : {
            shortcut: "/img/favicon/favicon.ico",
            icon : [
            {
                  url: "/img/favicon/favicon-16x16.png",
                  sizes: "16x16",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/favicon-32x32.png",
                  sizes: "32x32",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/favicon-96x96.png",
                  sizes: "96x96",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/favicon-192x192.png",
                  sizes: "192x192",
                  type: "image/png",
            },
            ],
            apple : [
            { url: "/img/favicon/apple-icon.png" },
            {
                  url: "/img/favicon/apple-icon-57x57.png",
                  sizes: "57x57",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-60x60.png",
                  sizes: "60x60",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-72x72.png",
                  sizes: "72x72",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-76x76.png",
                  sizes: "76x76",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-114x114.png",
                  sizes: "114x114",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-120x120.png",
                  sizes: "120x120",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-144x144.png",
                  sizes: "144x144",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-152x152.png",
                  sizes: "152x152",
                  type: "image/png",
            },
            {
                  url: "/img/favicon/apple-icon-180x180.png",
                  sizes: "180x180",
                  type: "image/png",
            },
            ],
            other : {
                  rel: "apple-icon-precomposed" ,
                  url: "/img/favicon/apple-icon-precomposed.png" ,
            },
      },
      manifest: "/img/favicon/manifest.json",
}

import : Layouts sass/scss
import "@/assets/scss/libs/aos.scss"; 
import "@/assets/scss/libs/grid.scss"; 
import "@/assets/scss/libs/fontawesome.scss"; 
import "@/assets/scss/libs/icon-custom.scss"; 
import "@/assets/scss/libs/feather.scss"; 
import "@/assets/scss/configs/fonts.scss"; 
import "@/assets/scss/configs/variable.scss"; 
import "@/assets/scss/configs/base.scss"; 

import : config
import ConfigLayoutProvider from "@/components/layouts/config.layout";
import : appRouter
import { AppRouterCacheProvider } from @mui/material-nextjs/v15-appRouter";
export default function RootLayout ({
     children,
}: Readonly <{
     children :React.ReactNode ;
}>) {
      return (
           <html>
                <head>
                    ...(if)
                </head>
                <body>
                    <AppRouterCacheProvider>
                         <ConfigLayoutProvider>
                               {children}
                         </ConfigLayoutProvider>
                    </AppRouterCacheProvider>
                </body>
           </html>
      );
}