Next.js - new project | Simple & Easy

Next.js!

Next.js -> new framework recommended instead of CRA (create react app)

Start new project:

npx create-next-app@latest

Options:

✔ What is your project named? … first-next-js-app
✔ Would you like to use TypeScript? … No / Yes -> YES!!
✔ Would you like to use ESLint? … No / Yes -> YES!!
✔ Would you like to use Tailwind CSS? … No / Yes -> depends on need: manual css or by tailwind
✔ Would you like to use `src/` directory? … No / Yes -> YES!! (better project organisation)
✔ Would you like to use App Router? (recommended) … No / Yes -> YES!! (App router is newer approach)
✔ Would you like to customize the default import alias (@/*)? … No / Yes -> NO!! (better overview when You see full import path)

Don’t forget to instal in VSC helpful plugins: ESLINT & PRETTIER

Basic app structure:

Static router by Catalogs:

      folder:src/app: mainPage -> route:"/"
      page.tsx
      layout.tsx

      folder:src/app/subpage -> route:"/subpage"
      page.tsx
      --layout.tsx

      folder:src/app/subpage/subpage - route:"/subpage/subpage"
      ---page.tsx
      ---layout.tsx

page.tsx: Component of single page f.e. arrow function:

 const AboutPage = ()=>{
    return (
    <div>
        <h1>ABOUT US</h1>
    </div>
    )
}
export default AboutPage

or function like:

export default function AboutPage(){
    return (
    <div>
        <h1>ABOUT US</h1>
    </div>
    )
}

Important: function MUST “export default”

File: layout.tsx:

It is layout of components of nested pages: f.e main page has “Menu” component, that should be on every subpage?

In mainpage level folder, layout.tsx should be like:

import { Menu } from "@/common/components/Menu"

export const metadata = {
  title: 'Layout next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Menu/>
        {children}</body>
    </html>
  )
}

or with props defined like:

import {FC} from "react";
import { Menu } from "@/common/components/Menu"

type RootLayoutProps = {
  children: React.ReactNode;
};
export const metadata = {
  title: 'Layout next.js',
  description: 'Generated by Next.js',
}

const RootLayout: FC<RootLayoutProps> = ({children}) =>{
  return (
    <html lang="en">
      <body>
        <Menu/>
        {children}
      </body>
    </html>
  );
}

export default RootLayout

Lower level layout for subpages [add <hr /> and description]:

import {FC} from "react";

type ContactLayoutProps = {
  children: React.ReactNode;
};

const ContactLayout: FC<ContactLayoutProps> = ({children}) =>{
  return (
    <div>
      <hr />
      Contact Layout
      <hr />
      {children}
    </div>
  );
}
export default ContactLayout

METADATA:

The same for every page & subpage: -> define in top level layout.tsx like:

export const metadata = {
  title: 'Layout next.js',
  description: 'Generated by Next.js',
}

Different for specific subpage & shared same value:

define in folder src/common file: “shared-metadata.ts”

inside it:

export const commonMetadata = {
    title: "WB NEXT",

}

use it in specific subpage:

import { commonMetadata} from "@/common/shared-metadata"
export const metadata = {
    title:`My contact ${commonMetadata.title}`,
    description:"This is my contact page"
}
export default function ContactPage(){
    return (
        <div>
          <h1>Contact</h1></div>
    )
}

MENU: common component for all pages:

define in folder src/common/components file: “Menu.tsx” like:

import Link from "next/link";

export function Menu() {
  return (
    <ul>
      <li>
        <Link href={"/"}>Home</Link>
      </li>
      <li>
        <Link href={"/contact"}>Kontakt</Link>
      </li>
      <li>
        <Link href={"/contact/team"}>Team</Link>
      </li>
      <li>
        <Link href={"/contact/about-us"}>About us</Link>
      </li>
    </ul>
  );
}

… import and use in other pages directly or in layout.tsx

Run project:

npm run dev

Shoud start on localhost:3000

*INFO: This post is my notes based on Udemy course (“Nextjs 14 od podstaw”) by Jarosław Juszkiewicz

Next.js - new project

Categories

Tags

Next.js!