Next.js 14: All you need to know

Hey there! Did you miss this year's Next.js Keynote or want to get a summary of what you've heard? No worries, I got you covered.

Next.js is a Framework built on React and they are determined to bring the power of full-stack to the frontend. They've been extremely innovative and have been chosen by Notion, Twitch, DoorDash and TikTok just to mention a few. Next.js 13 introduced the app/ directory, next/font and next/image as well as many other things. This year we have been gifted again and to be honest, there's never been a better time to be a Frontend developer.

Next.js is (almost) "Turbocharged"

With Next.js 13, Vercel introduced the alpha version of Turbopack. Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust. After merging the knowledge of Vercel and a few ex-Webpack engineers, a new contender arose on the horizon of bundlers.

Vercel is heavily invested in creating a better experience for developers and as a result, Turbopack is closer to stable than ever before. They are passing +5000 tests of next dev. According to the Framework giant, they witnessed a 53% faster local server startup and almost a 95% faster code update using next dev --turbo. The best part is; that the larger your project, the bigger improvements you'll run into.

Once Turbopack passes all the required tests, it will be tagged as stable. You can follow the process here: https://areweturboyet.com/.

Server Actions is now stable

There is no need to create API Routes manually or write event handlers. With Server Actions, you can define functions that run on the server but can be called directly from a component.

For example, a simple create function can be done in a single file:

export default function Page() {

  async function create(formData: FormData) {

    'use server'; // the use server directive is a must

    const id = await createItem(formData);

  }



  return (

    <form action={create}>

      <input type="text" name="name" />

      <button type="submit">Submit</button>

    </form>

  );

}

With Typescript, using server actions will give you an end-to-end type safety between the client and server. Also, you will get a ton of built-in functions when using the App router. You can redirect through routes with redirect() and read/set cookies with cookies() etc.

This is proof that Vercel's goal is clearly to provide the easiest access to all the full-stack opportunities on the front end. Isn't this cool?

Metadata changes

Metadata is just "data about the data", it may sound simple, but metadata plays a huge role in SEO and accessibility. To ensure a smooth user experience, Next.js will remove viewport, colorScheme and themeColor from metadata.

They wouldn't let us empty-handed, so from Next.js 14 you can customize the initial viewport of the page using the viewport object or the generateViewport function.

Note: both options are only supported in Server Components and only one of them can be exported from the same route.

// How to use the Static Viewport object in your layout.tsx / page.tsx

import { Viewport } from 'next'



export const viewport: Viewport = {

  themeColor: 'black',

}



export default function Page() {}



/* How to use the Dynamic generateViewport function 

 in your layout.tsx / page.tsx */

export function generateViewport({ params }) {

  return {

    themeColor: '...',

  }

}

Next.js teaches Next.js

Probably the biggest blessing to us WebDevs, is that now we can learn directly from the creators of Next.js. The course is entirely free of charge, and I'm not surprised by the exceptional comprehensiveness and depth of the curriculum they've assembled.

A few things you can and will learn at Next Learn:

• App Router




• Styling




• Setting up your Database




• Fetching data with Server Components




• Adding search and pagination




• Accessibility




• Authentication




• and more!

Well, that is it for this year's Next.js conf. If you would like to dig deeper into the things I mentioned, I recommend you check out the official release note or watch back the keynote.

Call to action

Hi, I am Gergo, but everybody calls me StariGeri — I am a Frontend Developer Intern as well as a Computer Science student and I am sharing many things around these topics.

If any of this sounds interesting to you subscribe to my newsletter, so you won't miss anything in the future. Also if you have some thoughts you’d like to share, a topic suggestion or you found a mistake, do not hesitate to reach out to me via LinkedIn or Instagram.