DEV Community

Cover image for Next.js 13.2.4
Ifeanyi Chima
Ifeanyi Chima

Posted on • Updated on

Next.js 13.2.4

To initialize your project, you should use

npx create-next-app . --experimental-app
Enter fullscreen mode Exit fullscreen mode

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',
};
Enter fullscreen mode Exit fullscreen mode

Tips & Tricks

Shipping to Production
This will give a production server

npx next build && npx next start
Enter fullscreen mode Exit fullscreen mode

To convert to static HTML

npx next build && npx next export
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Thank you, please follow me

Buy Me A Coffee


HTML GitHub

Top comments (0)