Arquitectura de un proyecto de Next.js

How to create a project in Next.js using TypeScript?

Starting a project in Next.js is simple and efficient thanks to the create-next-app command. This tool not only sets up the necessary project structure, but also allows you to integrate TypeScript, an option that is highly recommended. To get started, it is essential to have Node.js installed, as the command requires nbx.

When creating a project, you can include options that improve organization and development, such as:

• Integrate Slint to verify code quality.
• Exclude Tailwind if it is not necessary.
• Include the source directory for better code organization.
• Using the app-router, the new Next.js methodology for handling routing, which we will explore in more detail on other occasions.

Project configuration in Next.js

During the initial setup, you have the option to customize an import alias to make it easier to manage the modules in your project. Once configured, Next.js requires few dependencies, both for development and production:

• Production: react, react-dom, next.
• Development: typescript, eslint.

With the project created, it is a good idea to explore it with a tool such as Visual Studio Code to familiarize yourself with the general structure.

What is the Next.js project architecture?

The Next.js architecture efficiently organizes the different files and folders that make up a project:

The package.json file and key scripts.

Inside the package.json file, you will find the scripts that execute the main tasks:

• next dev: Starts the development server to view changes in real time.
• next build: Compiles the project for production.
• next start: Starts the project in production mode.
• next lint: Verifies that the code meets the defined quality standards.

Routing with the app-router

In the source folder is located the app-router, which contains vital files for the project configuration:

• Favicon: It is placed in the root of the app folder.
• Globals.css: Where global CSS styles and variables are defined.
• Layout.tsx: Acts as a wrapper for the whole application and is known as root layout.
• Page.module.css: Uses CSS modules to apply organized styles.
• Page.tsx: Defines the main page visible in the browser.

Additional resources: configuration and cache

Besides the main organization, there are other important aspects to consider:

The public folder and configuration with next.config.js.

Inside the public folder are stored all resources that should be publicly accessible, such as images and fonts. The next.config.js file is crucial for advanced configurations, including SAS compilers and complex Webpack configurations.

The importance of tsconfig.json and the .next folder

The tsconfig.json file handles TypeScript-specific configurations and defines the paths for dynamic aliases. Finally, the .next folder, generated during the build of the project, stores the cached files. In case of problems such as persistent caches of styles or components, it is recommended to delete this folder to fix common errors.

Next.js automates many architectural decisions, allowing developers to focus on creating functional and robust applications. Ready to get started with your next Next.js project? Take the time to explore and fully understand each of these components to maximize the efficiency and quality of your development. Go ahead and keep learning and exploring new technologies in the exciting world of web programming!