Switching from Nuxt 2 to Nextjs 14. Is it possible to have a "beta" Nextjs site and for it to work with Prismic Preview?

Developing with Prismic
, , ,
1

I am migrating a site from Nuxtjs to Nextjs and would like to have a beta site for it but I want the Prismic Preview on the repo to use the beta site while the NuxtJS site is live.

I don't see why this would be a problem as you set the URL in the Prismic preview options on the repo and I could simply set it to the beta subdomain.

I just found this: Upgrade Your Prismic Project with Our New Automated Tool and requested access but I wonder if the this would invalidate any data on the existing NuxtJS site because downtime would mean losing the client revenue. I want it to be stable for the client to use while I work on migrating the nextjs site. Otherwise, I would have to work to implement Nuxtjs and upgrade it anyway to use slice machine and would likely run into these problems thus doubling the workload.

I am also having the same problems as they are the old custom type so old data does not appear. Fortunately, I tested it on a dev page type so the CMS manager has overridden no data.

It is a bit stressful having issues with this. Hope this upgrade tool mitigates all of this, or someone can help me to best approach this.

Cheers!

3

Hey @jjames.home,

Let me see if I understand.

You have a Nuxt site that doesn't use Slice Machine. You want to create a Next site that uses Slice Machine. You will need both sites to use the same repository for a while.

It sounds like you have two projects:

  • Convert from Nuxt to Next
  • Convert from non-SM to SM

For the conversion to Slice Machine, we often recommend that our users use the Migration API to create a duplicate repository (or upgrade to platinum to use environments) to perform the upgrade safely. However, the upgrade tool is very smooth, and the upgrade process is often quite quick. (I don't think the thread you linked to was a user who used the upgrader tool.)

In any case, the switch from Nuxt to Next shouldn't be too hard. If you're not changing the models, you can create a Next project that consumes data from your existing repository with no problems.

For previews, you can create an additional preview environment in the settings area of your repository. You can give it a name like "Development" so that your content editors won't use it.

Let me know if you have any questions.

Sam

5

Thank you for the response, it is very reassuring.

To confirm:

Yes, you have it right. I want to create a Next site that uses Slice Machine using the existing data in the original repo, but I want to keep the Nuxtjs site live for a while. If I can I do not want to have to upgrade the Nuxt site and leave it behind.

Does the upgrade tool negate the use of the Migration API, or is this just to preserve data in case it goes wrong?

Does this mean I can't use the original repo? My client has already paid for a full year.

7

Does the upgrade tool negate the use of the Migration API, or is this just to preserve data in case it goes wrong?

Since a model change is always a tricky process, the Migration API will allow you to duplicate your site to do a dry run of the migration or preserve a back-up of your site in case anything goes wrong during the migration. But you can still use the original repo.

Sam

1 Like
9

Thanks, I'd like to keep to keep this open. I don't want to prevent my client from being able to update their site for too long as they make changes every day.

[prismic-nuxt - npm](https://Prismic Nuxt) 0.5.1

In each page I am looping through the slices like this:

    <component
      :is="sliceName(slice)"
      v-for="(slice, k) in document.data.body"
      :key="k"
      :padding="$refs.slice"
      :class="[
        prismicLast(slice, k, document.data.body),
        'slice-container',
        sliceClass(slice),
      ]"
      :slice="slice"
    ></component>

I think the only change on the live site would be to change document.data.body => document.data.slices. I can't seem to find any other update to do for the nuxtjs site. Do you think I might be missing something?

Excited to finally use slice machine on this project!

I did sign up to the upgrade tool early last week, and then the migration tool later last week but haven't received a response yet.

I would like for the client to be able to use Prismic Preview while using the NuxtJS but to show the NextJS site (even if some parts are not fully functional). This seems possible to me.

So far the plan is:

  1. Migrate data to new repo
  2. Use the upgrade tool on the new repo for the existing data
  3. Test if the Nuxt site functions correctly with the data structure changed on the new repo. Test all main pages and create a test page with all slices
  4. Use update tool on the live site
  5. Create NextJS website skeleton and add it to Prismic Previews while the NuxtJS is active for visitor side. They share the same rep
  6. Finalise NextJS site and switch over
10

Hey @jjames.home,

I did sign up to the upgrade tool early last week, and then the migration tool later last week but haven't received a response yet.

The Migration API is generally available. You can find instructions on how to use it by going to the Migrations tab of your repository.

You can opt in to the upgrade too by going to localhost:9999/labs with Slice Machine running.

So far the plan is

Your plan sounds good to me!

I think the only change on the live site would be to change document.data.body => document.data.slices

If you're referring to the Slice Machine migration, I'm not 100% sure since I haven't made the change before. It's possible that there will be other changes to the structure of the types and slices, but I'm not certain.

Sam