Creating new Next.js 13 app β€” and trying to migrate from an existing Next.js 12 app

I know, I know. It's new. It just came out yesterday. I recently set up a Next.js 12 app and felt confident I could get Slicemachine running on a Next.js 13 app with the new nested Layouts feature. Here's how you can do it in a nut shell:

  1. Run npx create-next-app@latest --experimental-app
  2. Follow the documentation for Set up Prismic
  3. When you get to npm install @prismicio/next you'll need to run npm install @prismicio/next --force due to strict Next.js dependency versions
  4. Continue to configure
  5. Adding the PrismicProvider and PrismicPreview go on the app/layout.tsx file†
  6. Create Slice Simulator page in app/ folder
  7. Update next.config.js to include basePath: '/app', β€” this tells Prismic to look in the app folder
  8. Update the app/page.tsx to include the SliceZone††

Technically β€” that's as I far as I've have gotten. npm run dev works, so does npm runs slicemachine. I went further to see if I could migrate an existing project to this new repository...

I moved the Next.js 12 working apps .slicemachine folder, slices folder and updated the prismicio.js file to ensure proper routes. With that I re-ran npm run slicemachine. All my Slices showed up! None of my Custom Types showed up β€” haha. So running npm run dev and going to the home page naturally 404's. I assume that is because Slicemachine is not properly seeing the .slicemachine/customtypes/homepage Custom Type I made. Bummer. Can't seem to find any help on the community here that shows how to migrate an existing Next.js repository to a new repo. Will continue to try in free time! Any ideas? Feel free to share!

†

"use client";
import Link from 'next/link';
import { PrismicProvider } from '@prismicio/react';
import { PrismicPreview } from '@prismicio/next';
import { linkResolver, repositoryName } from '../prismicio';
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <PrismicProvider
    linkResolver={linkResolver}
    internalLinkComponent={({ href, ...props }) => (
      <Link href={href}>
        <a {...props} />
      </Link>
    )}
  >
    <html lang="en">
      <head>
        <title>Ascent Design System</title>
        ...
      </head>
      <body>
        <PrismicPreview repositoryName={repositoryName}>
        {children}
        </PrismicPreview>
      </body>
    </html>
    </PrismicProvider>
  )
}

††

"use client";
import { SliceZone } from '@prismicio/react';
import { components } from '../slices';

export default function Home({ page }) {
  return (
    <SliceZone slices={page.data.slices} components={components} />
  )
}

1 Like

Hi there,

You might want to copy over the /customtypes folder from your previous project as well (like you copied the /slices and /.slicemachine folders), as it contains the customtypes json structures.
The custom types should then show up in the slicemachine.

Have a nice one
Alex

1 Like

You are 100% correct! I forgot to migrate the /customtypes folder. :see_no_evil: The Custom Types now show up in Slicemachine appropriately however I am still getting a 404 on the / route.

Unfortunately that was not the only issue and I am not sure I'll have time to debug this more. I know React 13 is new, and arguably in beta with the app/ folder. Not sure Slicemachine's integration will work with this new nested Layouts.

1 Like

Updating for clarification as of Nov 25, 2022. When Next 13's nested layouts / app directory is out of beta I imagine the Prismic team will be on top of updating prismic-next accordingly. Why do I say that? They were quick to update to Next 13's new next/image very quickly.