Create aliases for the imports to omit long import statements (dev issue not end user's)

[i-amansharma07]

Problem:
In the Screen Shot below we have a very long import statement which disrupts the code appearance and also make importing components harder which can be done relatively easy manner.

Can be seen in these files as well :

Solution
We can use path aliasing like @components/AppbarClient there are some alias already present inside next.config.js and we can describe some more and use it as a standard to bring uniformity in the code base.

correct imports examples :

[vishwas-babar]

Hi, I'd like to work on this issue. Could you please assign it to me?

[i-amansharma07]

Hi, I'd like to work on this issue. Could you please assign it to me?

Hey Vishwas i don't have permissions to assign tasks, you can complete your work and raise a PR, thanks for picking this up.

[vishwas-babar]

Ok I will work on that then raise a pr

[S007K]

To create aliases in a React codebase, particularly in a Next.js project, you can use path aliasing for import statements. This can be achieved by making modifications to the next.config.js file and then using the defined aliases in the codebase.

Here are the steps to create aliases in a React codebase, specifically in a Next.js project:

Modify next.config.js: In the root of your Next.js project, create or open the next.config.js file. If it doesn't exist, create this file at the root of your project.

Inside next.config.js, you can use the resolve.alias property to define your path aliases. Here's an example of how to define aliases for commonly used paths:

// next.config.js

const path = require('path');
module.exports = {
  webpack: (config, options) => {
    config.resolve.alias['@components'] = path.join(__dirname, 'components');
    config.resolve.alias['@styles'] = path.join(__dirname, 'styles');
    // Add more aliases as needed
    return config;
  },
};

In this example, we're defining aliases for the '@components' and '@Styles' paths.

[S007K]

Using the Aliases in Code: After defining the aliases in next.config.js, you can now use these aliases in your import statements throughout your codebase. For example, if you defined an alias for '@components', you can import components like this:

import AppbarClient from '@components/AppbarClient';

[S007K]

i hope it has answered your issue

[S007K]

i have also raised the PR #500 , on merging it resolved this issue.
Happy coding 👍

[i-amansharma07]

Yes but can you also use these aliases and update the PR?

[S007K]

yes! thanks for reminding me