Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Path alias

14/27
Recursos

Aportes 15

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si están en Windows sí es necesario que pongan el slash en baseUrl, pero en iOS y Linux no.
Además, con JavaScript también lo pueden hacer creando el archivo jsconfig.json y poniendo la configuración de la siguiente manera.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": [
        "components/*"
      ]
    }
  }
}

Si no estás usando TS, los path alias funcionan de igual manera en JS en el archivo jsconfig.json

Una pregunta para salir de la ignorancia, Next puede ser usado para cualquier tipo de Proyecto? asī sea a gran escala? o ahi ya debería usar React puro? en que casos no aplicaría usar Nextjs de haberlo?

Yo se quen no viene al tema pero cual el thema que tiene Vs code esta muy original.

Me podrian decir cual es?

♻️ Path aliases

<h4>Ideas/conceptos claves</h4>

/* .- todo lo del directorio que seleccionamos

<h4>Apuntes</h4>

Cuando creamos nuestra aplicaciones y se vuelven mas grandes, las importaciones se suelen volver de esta manera:

import Navbar from '../../../../components/Navbar/Navbar'

Esto es conocido por import hell o dot hell. Para ello se invento los path aliases. Es una forma de simplificar las rutas de nuestra aplicación.

Debido a que actualmente estamos usando typescript iremos a nuestro archivo tsconfig.json y agregaremos lo siguiente

{
  "compilerOptions": {
		// indicamos la base del proyecto
		// segun a esto los paths aliases
		// se ubicaran
    "baseUrl": ".",
    "paths": {
			// creamos los atajos
      "@database": ["database/db.ts"],
      "@components/*": ["components/*"]
    },
	...
}

En el primer path, debido a que es único el atajo es simple. En el segundo alias debido a que extraeremos diferentes archivos lo especificamos con “/*”

RESUMEN: Los path aliases nos ayudan a cortar las importaciones, para proyectos de grandes archivos

Encontré la documentación sobre “Absolute Imports and Module path aliases” en Next : https://nextjs.org/docs/advanced-features/module-path-aliases

Los path aliases son una caracteristica propia de NextJs, o tambien se pueden usar con TS sin nextjs necesariamente?

¿De dónde surge la convención de usar “@” al principio de los paths alias?

Este truco no me lo sabia y es super util, veo hasta mas limpio 😃

Si quieren más información de como armar su archivo tsconfig.jsnon o jsocnfig.json lo pueden encontrar aquí: https://nextjs.org/docs/advanced-features/module-path-aliases

Estuve siempre buscando este tips para mejorar la rutas o path

Path alias

Con esta implementación de NextJS podemos evitar el ‘dot hell’ en las rutas: ../../../../../cosa.ts

En el archivo tsconfig.json:

"baseUrl": "./",
  "paths": {
    "@database": ["database/db.ts"],
    "@components/*": ["components/*"]
  },

Y ya podemos hacer import Navbar from '@components/Navbar/Navbar'

Recuerden para buscar varios archivos /ruta/*
La razon por la cual @database no se hace de este modo, es debido a que esta buscando el archivo en especifico db.ts

      "@database": ["database/db.ts"], //buscando en un folder especifìco un archivo en concreto
      "@cors": ["cors-middleware.ts"],  
      "@components/*": ["components/*"], //buscando archivos en un folder especifìco
      "@pages/*": ["pages/*"], //buscando archivos en un folder especifìco
      "@public/*": ["public/*"]  //buscando archivos en un folder especifìco

Ya sé que esta pregunta no llega al caso, pero me podrían explicar estos dos conceptos que no termino de entender? Server Side Render y Static Side Render

  • Cuándo se debe usar la una o la otra?
  • Cuál es la diferencia entre estos dos conceptos?

el jsconfig.json se genera solo o lo debo crear yo mismo? hay alguna plantilla? como funciona?