NextJS where defines tilde '~' symbol in import path?

Question

I read code in an app with NextJS. It imports component like import Head from '~/components/layout/head'

The project structure:

-app
---components
---pages
---public

I wonder where defines ~ as root dir in nextJS.

Where can I find the config of this? Tried uncover the webpack config inside next package, but didn't find.

is this a Typescript project? – felixmosh Oct 22 '19 at 20:06 — felixmosh, Oct 22 '19 at 20:06

felixmosh · Answer 1 · 2023-04-27T16:12:18.990

7

With Typescript's paths feature you can specify a module mapping.

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"]
    }
    ...
  }
}

This will allow you to import using

import x from '~/components/layout/head';

that will be mapped to src/components/layout/head.

If your are using webpack, you will need to use tsconfig-paths-webpack-plugin.

edited Apr 27 '23 at 16:12

answered Oct 23 '19 at 12:06

felixmosh

1

Thx for telling! Based on your answer, I find this root path define is done by `babel-plugin-root-import`. – Gasin Oct 24 '19 at 06:38

score 2 · Answer 2 · answered Oct 03 '21 at 03:33

2

According to the doc.

You can set the module mapping without extra libs.

In your file structure, try this example.

// tsconfig.json 

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

Then go to your files:

import { xxx } from '~/components';

// or

import xxx from '~/components/xxx';

answered Oct 03 '21 at 03:33

Raymond Yeh

score 0 · Accepted Answer · answered Oct 24 '19 at 06:37

0

I find this is because the babel plugin babel-plugin-root-import, since the project uses this plugin in babel config.

More about this plugin can check here.

answered Oct 24 '19 at 06:37

Gasin

3 Answers3