Misc

shorten import paths

We want to prevent overly long import paths, caused by deep file nesting. Instead, we want to start a path straight from the src directory.

We cannot start the path with the src string, because it would refer to a node package from node_modules. We cannot start it with /src because it would refer to the host computer's root directory. Instead, the convention is to create a hardcoded alias using the @ symbol instead, which refers to the src directory.

import { x } from "@/types/foo"
import { x } from "../../../../types/foo"

We define the path alias(es) in tsconfig.json, and Next.js automatically parses them and registers them.

{
    "compilerOptions": {
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}