Skip to content

Next.js

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

What is Next.js

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.

Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.

Benefits of Next.js

Next js has feature called server components, where the ui components are pre-built on the server and sent to the client. All components are server components unless specified. This improves performance on the client side.

Serverless components is a feature released in React 19 and next.js extends them.

Another exceptionally good thing about next.js is routing. If you're building a react application, you'll have to handle routing with packages like react router. Next.js on other hand using file based routing, where each directory name becomes a route path.

Creating a next js app

Next js app can be initialized with npx

npx create-next-app@latest

You'll be prompted to answer a couple of questions like project, use of typescript etc.

If you look at the files generated, tsconfig.json is the file generated for typescript settings / config.

If use tailwind was during the prompt, then you'll have a tailwind.config.ts for adding themes.

The main entrypoint for the application is layout.tsx

We can store the components by creating a components directory inside the app directory.

To make a next js component a client component the "use-client" directive can be used.

Client Component in Next.js
"use-client";