DEV Community

viistorrr
viistorrr

Posted on • Edited on

2

Setear rutas relativas en NextJS

Hey! Todos en algún momento de nuestros proyectos de NextJS nos hemos encontrado con la situación de tener que importar algún componente que se debe usar.

Generalmente, importamos las rutas de ésta manera 👇🏾

old method

Y eso no está mal, sólo que los proyectos crecen y a medida que pasa ésto puede ser muy tedioso porque debemos movernos entre carpetas y tenemos que empezar a buscar para encontrar el que necesitamos. Esto se puede solucionar de manera muy fácil y acá te voy a mostrar cómo:

Dentro de la raíz del proyecto, vas al archivo tsconfig.json en caso de que estés usando Typescript, de lo contrario debes tener jsconfig.json

Una vez en éste archivo, tienes un objeto llamado compilerOptions en el que como primero, vas a agregar la opción baseUrl así👇🏾

base

Luego, se agrega el atributo paths y en éste objeto las paths 👇🏾

path

Se puede agregar cuantas rutas consideres necesarias, al final podrás tener algo como ésto👇🏾

paths

Al final, la estructura de tu proyecto en NextJS va a lucir mucho más limpia y deberías poder ver tu proyecto así

next project

www.viistorrr.com
@viistorrr

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay