Next.js Discord

Discord Forum

Migrating from Nextjs 12 to 14 (latest)

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
I'm finally migrating my Nextjs app from version 12.2.4 to the latest version. I was wondering if anyone else has done it recently and can give some pointers/answers:
1. is it an easy upgrade? will i break too many things?
2. what is the easiest way to do this migration? https://nextjs.org/docs/app/building-your-application/upgrading
3. what should I look out for? any thing that might help make this migration easier?
4. do I need to upgrade to 13 first and then upgrade to 14?
5. Any Youtube videos your recommend watching?

Thanks in advance.
Answered by joulev
1. Yes if you continue to use the pages router. If you want to migrate to the app router, the difficulty of the migration depends on the size of your app. The following answers assume you continue to use the pages router.
2. You are on the right track. Go to the code mods page, and upgrade incrementally (to 13 first, then 13.2, so on). Each upgrade should be simple.
3. Nothing. Just follow the codemods page. The release announcements at https://nextjs.org/blog are also helpful if you want some briefing on breaking changes.
4. Yes that’s recommended. See pts 2 and 3.
5. I don’t have any materials for you outside official resources on nextjs dot org
View full answer

7 Replies

@Barbary Lion I'm finally migrating my Nextjs app from version 12.2.4 to the latest version. I was wondering if anyone else has done it recently and can give some pointers/answers: 1. is it an easy upgrade? will i break too many things? 2. what is the easiest way to do this migration? https://nextjs.org/docs/app/building-your-application/upgrading 3. what should I look out for? any thing that might help make this migration easier? 4. do I need to upgrade to 13 first and then upgrade to 14? 5. Any Youtube videos your recommend watching? Thanks in advance.
1. Yes if you continue to use the pages router. If you want to migrate to the app router, the difficulty of the migration depends on the size of your app. The following answers assume you continue to use the pages router.
2. You are on the right track. Go to the code mods page, and upgrade incrementally (to 13 first, then 13.2, so on). Each upgrade should be simple.
3. Nothing. Just follow the codemods page. The release announcements at https://nextjs.org/blog are also helpful if you want some briefing on breaking changes.
4. Yes that’s recommended. See pts 2 and 3.
5. I don’t have any materials for you outside official resources on nextjs dot org
Answer
Barbary LionOP
Thanks @joulev
1. by size, i suppose you mean, the number of pages that I want to migrate to app router?
2. interesting. I thought you could just migrate from 12 to 14. good to know.
@Barbary Lion Thanks <@484037068239142956> 1. by size, i suppose you mean, the number of pages that I want to migrate to app router? 2. interesting. I thought you could just migrate from 12 to 14. good to know.
1. Yes, also the complexity of the pages themselves.
2. It’s recommended to go incrementally, but if you have fully understood all breaking changes (there aren’t many between 12 and 14), and know what you are doing, then certainly yes you can go directly.
@joulev 1. Yes, also the complexity of the pages themselves. 2. It’s recommended to go incrementally, but if you have fully understood all breaking changes (there aren’t many between 12 and 14), and know what you are doing, then certainly yes you can go directly.
Barbary LionOP
hello again.
Thanks for your previous help.
It seems keeping my pages folder is the easiest way to upgrade. can I just:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

1. will everything just work?
2. _document.js and _app.js will still work?
3. do i have to change next.config.js at all?

It seems like its very simple. I'm planning on trying to update in the next couple of days. cheers
American English Coonhound
I'm migrating from Next 12 to 14 using this command:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

The challenge that I'm facing is that when I run npm run dev Next is linting code that it was ignoring before.
Example:
"Error: × The left-hand side of an assignment expression must be a variable or a property access."
and the code line is: standardObj[index]?.key= newValue;

The dev compiling is never complete, any thoughts on why is that, thank you.