Today I Learned

hashrocket A Hashrocket project

Module aliases using Typescript in Next.js

Importing a module can be lengthy, depending on your project's app structure.

import { Widget } from "../../../../components/widget";

Utilizing your tsconfig, aliases can be created for module resolution.

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

Now, our previous example can be expressed like so:

import { Widget } from "@components/widget";

Next.js is already set up to deal with this, so you should not need to add any additional libraries like tsc-alias to handle the actual module resolution when the project is built for production.

See More #javascript TILs
Looking for help? At Hashrocket, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.