Next.js 13.2.4

#nextjs #javascript #webdev #programming

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