Column

Next.js is a framework for React. React is a JavaScript library developed by Facebook and is used to build the frontend of web applications. Next.js is a web application framework for building web applications using React.

Next.js Development

Next.js is primarily developed by Vercel. While Next.js itself is open-source software, there are many aspects tailored specifically for the hosting service Vercel.

It can also be used with other hosting services like Netlify or AWS Amplify, but some features may be unavailable or optimized specifically for Vercel.

Features of Next.js

Next.js provides all the necessary features for utilizing React applications and building web applications. It includes the following features:

Routing

Next.js provides two types of routing:

• Pages Router
• App Router

Pages Router has been around for a while, while App Router has been introduced since Next.js 13. Pages Router routes files based on their names within the pages folder.

App Router routes based on folders and page.tsx. Additionally, dynamic routing can be defined by creating folders like [id].

Rendering

Next.js offers both client-side and server-side rendering. Client-side rendering is used for content that varies per user, while server-side rendering provides consistent content for all users.

Furthermore, with the Server Components feature, it's possible to render only parts of the screen on the server side. This can help improve rendering speed and enhance user experience.

Data Fetching

Next.js' App Router assumes a different caching mechanism compared to the standard fetch API. Therefore, it's recommended to use the fetch API extended by Next.js.

Since Next.js operates on both the client and server sides, data fetching considerations differ in terms of security and other aspects. Utilizing the fetch API extended by Next.js is advisable from this perspective as well.

Styling

Styles (CSS) provided by Next.js include:

• Global CSS
• CSS Modules
• Tailwind CSS
• Sass
• CSS-in-JS

Optimization

Next.js provides several optimization features for web applications. These include speed improvements and SEO enhancements to improve Core Web Vitals.

It includes built-in components such as Image, Link, and Script. These components enable automatic resizing of images, prefetching of linked pages, and loading and executing external scripts, among other functionalities.

For SEO, there's the Metadata API, allowing flexible changes to the head tag contents. Assets like images placed in the public folder are automatically served via CDN, enhancing speed.

TypeScript

Next.js adopts tsx file naming convention and is primarily developed with TypeScript. Data transfer and other functionalities also utilize TypeScript, enabling type-safe development.

This is particularly beneficial in team development scenarios. By eliminating JavaScript as an option from the start, development is inherently TypeScript-based, resulting in increased development efficiency and type safety.

Getting Started with Next.js

To start a project with Next.js, use the following command. Node.js is assumed to be installed.

npx create-next-app

Follow the wizard to set up the project. The options include:

• Project name (user input)
• Use TypeScript (Yes/No)
• Use ESLint (Yes/No)
• Use Tailwind CSS (Yes/No)
• Use src directory (Yes/No)
• Use App Router (Yes/No)
• Use default import aliases (Yes/No)

Afterward, run npm run dev within the generated folder to start the application at http://localhost:3000. The initial structure typically looks like this:

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│     ├── next.svg
│     └── vercel.svg
├── src
│     └── app
│          ├── favicon.ico
│          ├── globals.css
│          ├── layout.tsx
│          ├── page.module.css
│          └── page.tsx
└── tsconfig.json

Most changes will be made within the src/app directory.

Running Next.js in Production

Getting npm run dev running locally is the easy part. Once real users show up, Next.js needs somewhere to run continuously: a Node process or container for the App Router, a way to absorb traffic spikes, and someone to patch and monitor the servers underneath. Vercel packages all of that up, which is why so many teams start there — but it stops being the obvious choice once usage (and the bill) grows.

Teams that outgrow the free tier, or that need the app to stay inside their own cloud account, typically move Next.js onto containers on Kubernetes instead. That trade gives you control over cost and where the app runs, in exchange for taking on the operational work Vercel used to handle: scaling pods up and down automatically as traffic changes, and keeping the cluster itself affordable to run.

Kubo is built for that gap — a managed Kubernetes service that gives you the same standard Kubernetes APIs you'd use to run Next.js in containers, without the weeks of cluster setup that self-hosting usually involves.

Conclusion

Next.js has become increasingly popular for modern web application development. It offers high development productivity and easy optimization for speed and SEO.

By using the Hexabase TypeScript SDK, it's easy to integrate with Next.js. Dive into web application development with Hexabase × Next.js!

Next.js by Vercel – The React Framework