Following the big version jump of nextjs 13 to 14 now we see the afetermath of major “app folder” approach chages. in tihs version of nextjs 15 we see a lot of bug-fix, improvements and fixes related to the overall stability of nextjs. In this post i want to share with you my perspective of nextjs state as a software engineer and what do i think the future holds for nextjs future versions. This version 15 of nextjs mark the maturity of the framework, the engineers and the teams behind it, seems to be happy with current state of overall framework of nextjs. we will talk about it more in a moment but first let’s take a look at a few examples out of the big release of nextjs 15.
Nextjs 15 updates
As i said before it’s mostly bug-fix and small changes in nextjs 15, this is why from my personal point of view as a software engineer it’s a very good update, in fact it’s a confident vote that this version have relatively small changes to it’s core, to it’s api or how it being used as a framework. let’s take a look at a few examples to understand what have changed.
Fetch: fetch requests, GET Route Handlers, and client navigations are no longer cached by default – this is great, as it caused a lot of problems for engineers developing their code or adding additional services or library that would add their own cache. and the “sub-context” message here by the team of nextjs is that “we were opinionated too much here, we want to give the ball back to developers to decided on management of their cache” – which again is great because it shows that the team is open to feedback and open to change-in-direction when they see their mistake (behind the scenes there were a lot of negative feedback against nextjs in regards to cache management!)
remove geo and ip from NextRequest: another small but breaking change to nextRequest. so if you relay on this one for your requests make sure to check more “breaking” changes in the big list of changes so you can upgrade to nextjs 15.
Nextjs Dynamic APIs now async – now it means that nextjs API like “cookies”, “headers” need to be used as async (with await). see the pull requests here for more information. In here as well we don’t see major changes to it’s API of nextjs, we don’t need major refactors to apply breaking changes. there is no more “big jumps” for nextjs 15 as we seen with previous versions.
Migration Nextjs 15
if you want to upgrade your project to nextjs 15 simply run the npm command to do so, now 15 is the public version (no longer canary)
npm install next@15
afterwards you should go on the bug fix list (linked above) and look for “breaking” changes and try to see if you have your code using something that is breaking. mostly likely not. however, in some cases like “cache” you might lose “performance” if you app is heavily relaying on cache that are default by nextjs. in this case you might want to consider using library, different configuration or implement something yourself or monitor performance of your app once you upgrade to nextjs 15. however it most likely that it won’t bother you very much.
upgrade react: once you upgrade to nextjs 15 you’ll need to upgrade to reactjs 19 – that might be a more of a challenge as you might have reactjs code that need to be migrate.
codemods – there is a codemods examples to help you migrate your code from previous to current. note that those are usually small changes rather than a big refactor.
Code Examples nextjs 15
here some examples of code that need to be changed, mostly around nextjs api that are async and require “await”. let’s look at cookies:
import { cookies } from 'next/headers'
// Before
const cookieStore = cookies()
const token = cookieStore.get('token')
// After
const cookieStore = await cookies()
const token = cookieStore.get('token')
Nextjs team provide us with the option to continue and write the code sync rather than in the new way with async. however it’s recommended to write the code with above example with “await”.
let’s see how to use headers with async:
import { headers } from 'next/headers'
// Before
const headersList = headers()
const userAgent = headersList.get('user-agent')
// After
const headersList = await headers()
const userAgent = headersList.get('user-agent')
async layout
// Before
type Params = { slug: string }
export function generateMetadata({ params }: { params: Params }) {
const { slug } = params
}
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Params
}) {
const { slug } = params
}
// After
type Params = Promise<{ slug: string }>
export async function generateMetadata({ params }: { params: Params }) {
const { slug } = await params
}
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Params
}) {
const { slug } = await params
}
Summary – Nextjs 15 is here!
Bottom line is it looks like nextjs is more stable, and it looks like for future versions that nextjs will not be changing in the upcoming future. being able to recognize that is very important tool as a software engineer and something that is important for software architect. The reasoning behind that is that technology is picked for the future and if we pick a framework or api that is going to change a lot, we pick tech debt which will cause us problems in the future and more extra work.
Looking into where nextjs change in v13 to 14 and now 15 it’s definability looks like current major version is simply “lining up” what nextjs is going to be for the next 5-10 years to come. and it looks like bright and stable future. It doesn’t looks like the team try to push new weird unrelated features to nextjs, they framework stay within it’s own general vision of “framework” that is not “too opinionated” but “just enough”, nextjs 15 became what i would say vite try to be, it’s almost like 2 steps ahead. it’s an attempt of “giving you infrastructure” to just write code and focus on product and other infrastructure that is needed for your project rather than things that less important to customize like routes, http request, folder structure, entities(page.tsx, layouts.tsx, error.tsx), and nextjs API like cookies, headers – you don’t need to build those infra or to consider of guide lines on how to use those! it’s all set and ready to go!
Bottom line, npx create-next-app@latest and good luck with your next project!
Lior Amsalem embarked on his software engineering journey in the early 2000s, Diving into Pascal with a keen interest in creating, developing, and working on new technologies. Transitioning from his early teenage years as a freelancer, Lior dedicated countless hours to expanding his knowledge within the software engineering domain. He immersed himself in learning new development languages and technologies such as JavaScript, React, backend, frontend, devops, nextjs, nodejs, mongodb, mysql and all together end to end development, while also gaining insights into business development and idea implementation.
Through his blog, Lior aims to share his interests and entrepreneurial journey, driven by a desire for independence and freedom from traditional 9-5 work constraints.
Leave a Reply