To initialize your project, you should use

npx create-next-app . --experimental-app 

Next.js uses server-side rendering by default, be mindful of any code that may rely on browser-specific objects such as window

API
The API folder allows us to query data from a database.

Metadata
We can inject meta data for the web site very easily.

Adding metadata in the app/layout will be applied to the whole website or, You can add this statically to any page that you want create that with.

// app/layout.tsx  import type { Metadata } from 'next';  export const metadata: Metadata = {   title: 'Home',   description: 'Welcome to Next.js', }; 

Tips & Tricks

Shipping to Production
This will give a production server

npx next build && npx next start 

To convert to static HTML

npx next build && npx next export 

Adding env variables

create a file .env.local in the root dir of your project.

The environment variable is only made available server side. To make it available on client side, we use

NEXT_PUBLIC_API_URL=dev 

Naming structure

page.tsx

In every route or folder, this serves as the “index” page, this is the component that will be served to you when you go to /about on the browser.

 import type { Metadata } from 'next'  export const metadata:Metadata = {     title: "Users" }   const usersPage = () => {   return (     <div>page</div>   ) }  export default usersPage  

The file is called page.tsx but the functional component is called usersPage

Thank you, please follow me