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
Top comments (0)