Next.js 14 Comes With Interesting Updates

It's been a while since Next.js released its version 13 that brought pretty much big changes and improvements, one of them is the new App Router that uses React Server Component compare from the old Pages Router. Two days ago, in Next.js Conf, they introduced Next.js 14 that comes with some interesting updates that help developer to increase their productivity and efficiency in the development process. Among the updates, there are two things worth pay attention to. Those are the Server Actions and new Next.js Learn. Let's talk about them.

Server Actions

Long ago since Next.js 9 introduced API routes, we can write back-end code that later we use it to handle form submission at the front-end, looks something like this:

/pages/api/submit.ts

1import type { NextApiRequest, NextApiResponse } from 'next';
2 
3export default async function handler(
4  req: NextApiRequest,
5  res: NextApiResponse,
6) {
7  const data = req.body;
8  const id = await create(data);
9  res.status(200).json({ id });
10}

/pages/index.tsx

1import { FormEvent } from 'react';
2 
3export default function Page() {
4  async function onSubmit(event: FormEvent<HTMLFormElement>) {
5    event.preventDefault();
6 
7    const formData = new FormData(event.currentTarget);
8    const response = await fetch('/api/submit', {
9      method: 'POST',
10      body: formData,
11    });
12 
13    // Handle response if necessary
14    const data = await response.json();
15    // ...
16  }
17 
18  return (
19    <form onSubmit={onSubmit}>
20      <input type="text" name="name" />
21      <button type="submit">Submit</button>
22    </form>
23  );
24}

Now with Next.js 14, we can simplify the code into just one file, for example:

/app/pages.tsx

1export default function Page() {
2  async function create(formData: FormData) {
3    'use server';
4    const id = await createItem(formData);
5  }
6 
7  return (
8    <form action={create}>
9      <input type="text" name="name" />
10      <button type="submit">Submit</button>
11    </form>
12  );
13}

We can use the Server Actions through a form but it's not a requirement. We can also directly called them as a function without a form, and by doing this especially when using Typescript we can make sure the type safety end-to-end.

Next.js Learn

They also introducing a brand new Next.js Learn , the free updated course to learn Next.js created by Next.js themselves to help you understand deeply about this awesome framework. They're including some new concepts that they brought to their previous update with version 13, like app router, setting up Postgres database, streaming, fetching data with Server Components, etc. I think this is a great starting point especially to whoever want to learn Next.js from scratch.

Other than that, they also added couple improvements such as updated compiler now using Turbopack which will replace Webpack and brings more speed in local server startup by up to 53.3% and up to 94.7% faster code updates with Fast Refresh. I personally excited about this updates, it's definitely will improve both developer and user experience eventually.