Next.js App Router is stable since 13.4.

Here are some steps I've done to migrate my static blog from pages/ to app/ directory.

Update next from package.json and package-lock.json

npm update --save next

# or
npm install next@latest react@latest react-dom@latest

Folder structure

# before
/pages
├── _app.tsx
├── _document.tsx
├── index.tsx
└── posts
    └── [slug].tsx

# after
/app
├── index-page.tsx (Client)
├── layout.tsx (Server)
├── page.tsx (Server)
└── posts 
    └── [slug]
        ├── page.tsx (Server)
        └── post-page.tsx (Client)

app/layout.tsx (Server Component)

import "../styles/globals.css";
import { Navbar } from "../components/Navbar";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

app/page.tsx (Server Component)

// Import your Client Component
import IndexPage from './index-page';
 
async function getPosts() {
  const res = await fetch('https://.../posts');
  const posts = await res.json();
  return posts;
}
 
export default async function Page() {
  // Fetch data directly in a Server Component
  const posts = await getPosts();
  // Forward fetched data to your Client Component
  return <IndexPage posts={posts} />;
}

app/index-page.tsx (Client Component)

"use client";

export default function IndexPage({ posts }) {
  return (
    <div>
      {posts.map((post) => (
        <p>{post.title}<p>
      ))}
    </div>
  );
}

Note: If your fetch fails like below in local development, change localhost to 127.0.0.1 in your fetch url.

https://github.com/node-fetch/node-fetch/issues/1624

Unhandled Runtime Error
Error: fetch failed

Call Stack
Object.fetch
node:internal/deps/undici/undici (11413:11)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)

getStaticPaths -> generateStaticParams

app/posts/[slug]/page.tsx (Server Component)

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params;
  // ...
}

getStaticProps -> getProjects (can be named anything)

app/page.tsx (Server Component) or app/posts/[slug]/page.tsx (Server Component)

// This function can be named anything
async function getProjects() {
  const res = await fetch(`https://...`);
  const projects = await res.json();
 
  return projects;
}
 
export default async function Index() {
  const projects = await getProjects();
 
  return projects.map((project) => <div>{project.name}</div>);
}

next.config.js

const nextConfig = {
  output: "export",
}

package.json


// before
{
  "build": "next build && next export",
}

// after
{
  "build": "next build",
}

Change Cloudflare Pages Build configuration to above.

"next build",

tailwind.config.js

// before
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", ],
}

// after
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", ],
}

Done.

Next.js 13 App Router migration