FrontEnd Framework: Next.js 13

Hello, today let's take a look at the FrontEnd Framework: Next.js 13.

Description

Next.js is a React framework for building full-stack web applications. It leverages React components to build the user interface and provides additional features and optimizations.

Next.js abstracts away the tools required for React, such as compilation, and configures them automatically, allowing developers to focus on building applications.

With Next.js, you can build dynamic and fast React applications.

You might wonder why we introduce Next.js for building full-stack web applications in a FrontEnd Framework. The reason is that the current API provided by Next.js has shown limitations in terms of speed when utilizing certain features, making it challenging to use for large-scale services (servers) instantly.


Next.js 13 Advantages

  • Name
    Routing
    Type
    Description

    Next.js provides a file-system-based router, supporting layouts, nested routing, loading state handling, and error handling. You can easily implement routing-related features.

  • Name
    Rendering
    Type
    Description

    It supports client-side and server-side rendering, optimizing static and dynamic rendering on the server using client and server components. This can improve the user experience of your application.

  • Name
    Data Fetching
    Type
    Description

    Data fetching can be easily handled using async/await.

  • Name
    Styling
    Type
    Description

    It offers various styling methods, but personally, I think it's most compatible with Tailwind CSS. I would like to write about Tailwind CSS in more detail through another article.

  • Name
    TypeScript Support
    Type
    Description

    Given the increasing number of TypeScript projects lately, I wondered if this is an advantage? But after reading various articles, many said that TypeScript support is a benefit. It supports better type checking and efficient compilation, allowing for stable use of custom type checks.

nextjs13

Next.js 13 Disadvantages

  • Name
    Learning Curve
    Type
    Description

    There is a distinction between Next.js 13 and its previous versions. Until now, many projects have adopted the Pages folder structure, and transitioning to the App folder structure may require time and effort. If you proceed with an App folder-based project and continue using the App folder, you may find that learning about Pages becomes unnecessary. However, if you decide to use both Pages and App folders concurrently, you might encounter a learning curve. In particular, we experienced difficulties during the migration from the Pages folder to the App folder, and some projects continue to work fine with the Pages folder, so they are still using it.

  • Name
    Server Resources
    Type
    Description

    Server-Side Rendering (SSR) is a double-edged sword. While it may provide a better user experience, it utilizes server resources, and in the case of significant traffic, it may increase the server's load.

  • Name
    API
    Type
    Description

    You can implement the server in various ways, and Next.js also allows internal server implementation. We have built servers using Node.js and Express.js, and migrating all the server code (simple CRUD operations) to Next.js posed no issues. However, when compared to various other servers, we felt that Next.js lacked in speed. This article currently focuses on Next.js 13 for FrontEnd, but I would like to revisit the topic of BackEnd Next.js 13 in the future.

nextjs13seo

Next.js 13 Summary

Next.js is a convenient framework for building fast, SEO-optimized full-stack applications with React. It offers SSR and enables server-setup. While there are some shortcomings in server functionality, it has been announced that these are continuously being improved, so it could become a truly great framework.

  • When asked from a user's perspective (not a developer's perspective, but a friend's), they said they couldn't tell if the server was slow. Even when explaining the differences in speed, the response was that they didn't understand well.
  • Theoretically, Next.js is SEO optimized. However, when optimizing for SEO, it would seem that the most important factor is the content itself.