Installation requirement

# node requirement
v18.19.0+

App Route

Config app route

// need to modify nextConfig
const nextConfig = {
  appDir: true,
}

Top level files move

// layout moves
src/pages/_app.tsx >>> src/app/layout.tsx

// page moves
src/pages/index.tsx >>> src/app/page.tsx

Api Routes

Routes are restructured inside the App route.

Every endpoint is now a route.ts inside of a api subdirectory

app/api/route.ts
app/api/accounts/login/route.ts

Request

import { NextRequest, NextResponse } from "next/server";

<Links>

For existing links in NextJS 12, you have to run the following command to retrofit them to NextJS 13 format

npx @next/codemod@latest new-link .

• This is caused by NextJS 13 now not using an <a> tag underneath the Link component

Slugs

Slugs can be referenced in NextJS 13 via params.slug

// app/blog/[slug]/page.js
// /blog/a
// { slug: 'a' }
export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}