Skip to main content

Introduction to Next.js

Next.js is a full-stack web framework developed by Vercel. It enables you to create high-quality web applications with the power of React components. We are going to build our TaskFlow application using Next.js.

Web framework​

Building within a web framework means that you as a developer can take advantage of a variety of features. However, it also means that there is less flexibility due to the constraints of the framework's architecture. For instance, Next.js has a built-in file-based routing system. It automatically creates routes based on your project structure. So the way you set up your routing logic should be based on the provided conventions.

Features​

Next.js offers a variety of powerful features that help streamline the development process. These features include:

  • Routing: Next.js offers an extremely robust routing system based on your project structure. It also features dynamic routes, nested routes, and layouts.
  • Built-in optimizations: Next.js automatically optimizes images, and fonts for improved user experience.
  • Streaming: You can stream UI from the server, and create a seamless user experience with loading files and React's Suspense element.
  • Server components: Next.js enables building components on the server to reduce additional client-side logic.
  • Server actions: You can run server code just by calling a function. There is no need for an extra API layer.

Of course there is much more that comes with Next.js. You will discover it very soon. The documentation is also pretty well-written, so we encourage you to take a look. It is provided in the further reading section below.

We will first set up a Next.js project, which will give you hands-on experience with the most important of Next.js's capabilities.

App Router vs. Pages Router​

It is important to note that, depending on which Next.js version you use, there is a different router being used: The App Router or the Pages Router. We are using the newer App Router, which allows you to use React's latest features. Please note as well, that at the top of the sidebar in the documentation, you should always make sure to select "Using App Router" to see the correct documentation.

Further reading​