3 reasons why Next.js 13 is better than Next.js 12

Next.js is one of the most popular tools for building web applications in React. Its ability to render on both the server and client, along with its integration with other technologies like TypeScript (my favorite), has made it a very popular choice among web developers.

The latest version of Next.js, version 13, has brought new features and improvements that make it definitely more powerful than its previous version. In this article, I will mention some of these new features and how we can improve our workflow in the development of web applications in React.

1. Improved support for static page generation

One of the key improvements in Next.js 13 is the improved support for static page generation. This means that it is now much easier to generate static pages for our application, which can significantly improve the performance and loading speed of the entire website.

Static pages can now be generated incrementally instead of having to regenerate all pages every time a change is made to the application. This can save a significant amount of time and resources in the development and implementation of the application.

In the following example, I use getStaticPaths and getStaticProps to statically generate pages for each of the posts obtained from an API. By using this technique, every time I access a post page, it will show me the content that has already been statically generated, thus improving the loading speed.

export async function getStaticPaths() { 
  const res = await fetch('https://mylink.com/myapi/posts') 
  const posts = await res.json() 
  
  const paths = posts.map((post) => ({ 
    params: { id: post.id }, 
  })) 
  
  return { paths, fallback: false } 
} 
  
export async function getStaticProps({ params }) { 
  const res = await fetch(`https://mylink.com/myapi/posts/${params.id}`) 
  const post = await res.json() 

  return { props: { post } } 
} 

function Post({ post }) { 
  return ( 
    <> 
      <h1>{post.title}</h1> 
      <p>{post.content}</p> 
    </> 
  ) 
} 

export default Post

2. New Routing System

Another important feature of Next.js 13 is its new routing system. The new routing system makes it much easier to handle dynamic and parameterized routes in our application.

This routing system now uses a file-based approach instead of a code-based approach. This means that dynamic routes can be defined in static files instead of having to write code to handle such routes.

For example, let’s say I am on the route: “pages/article/[car].ts”. In the example, I will use the useRouter hook to get the car parameter from the URL. This will make it much easier to handle the dynamic routes of my application.

import { useRouter } from 'next/router' 

function Article() { 
  const router = useRouter() 
  const { car } = router.query

  return <h1>Article: {car}</h1> 
} 

export default Article

3. Improvements in TypeScript Compatibility

Well, we’ve come to one of my favorites, Next 13 also comes with significant improvements in TypeScript compatibility. Now it’s a little easier to write applications in TypeScript and take advantage of all the benefits it offers.

One of the most important improvements is the support for type inference in the getStaticProps and getServerSideProps functions. This means that it is now simpler to work with typed data and avoid type errors at runtime.

As a last example in this article, I define the Post interface to type the data obtained from an API and use it in the getStaticProps function and in the definition of the posts property of the Blog component.

interface Post { 
  id: number 
  title: string 
  content: string 
} 

export async function getStaticProps(): Promise<{ props: { posts: Post[] } }> { 
  const res = await fetch('https://mylink.com/myapi/posts') 
  const posts = await res.json() 

  return { props: { posts } } 
} 

function Blog({ posts }: { posts: Post[] }) { 
  return ( 
    <> 
      {posts.map((post) => ( 
        <div key={post.id}> 
          <h1>{post.title}</h1> 
          <p>{post.content}</p> 
        </div> 
      ))} 
    </> 
  ) 
} 

export default Blog

Great! Now you know that static page generation, the new routing system, and improvements in TypeScript compatibility are some of the enhancements that make Next.js 13 one of the best options for web development, making our web projects even faster, more efficient, and scalable than they were before.

That your code be as perfect as a summer breeze! Best wishes!