Next.js App Directory Boilerplate

verified codemod icon

This automation reads the contents of your pages directory and creates the placeholder files.

Next.js
ts-morph
Estimated time saving
5 minutes/occurrence
Change mode
Assistive
Applicability criteria

Next.js version is greater or equal to 13.4.

Made by
Codemod.com
Codemod.com

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/app-directory-boilerplate
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

The first step to migrate your pages to the app directory is to provide a new file structure, respected by the App router.

This is attempted by this codemod, which reads the contents of your pages directory and creates the placeholder files.

The placeholder files define the basic layout and page structure.

The boilerplate includes the following:

  • placeholder page.tsx and layout.tsx files which define a UI unique to a route.
  • the placeholder app/layout.tsx file which replaces pages/_app.tsx and pages/_document.tsx files.
  • the placeholder error.tsx file which replaces pages/_error.tsx files.
  • the placeholder not-found.tsx file which replaces pages/404.tsx files.

If the codemod detects that a getStaticProps function is not used, it will be removed. Otherwise, it will remove the export keyword from the function definition.

Example

If you have the following directory:

  pages
  ├── _app.tsx
  ├── _document.tsx
  ├── _error.tsx
  ├── 404.tsx
  ├── a.tsx
  └── b
        └── c.tsx

The codemod will generate the following corresponding directory:

  app
  ├── page.tsx
  ├── layout.tsx
  ├── error.tsx
  ├── not-found.tsx
  ├── a
        └── page.tsx
  └── b
        └── c
              └── page.tsx

Links for more info