コラム

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.

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