After a while working with NextJS and studying it I found a way to implement <code>Imports</code> in a more dynamic way, leaving the code cleaner.
One thing that bothered me a lot was the fact that I had to write a tripe of imports like: <code>import * from &quot;../../../../what-want-import&quot;</code>, in some cases my code was stuck extremely large for something that wasn&#39;t needed.
So one fine day in October I was browsing <code>NextJS Issues</code> and came across this new <a href="https://github.com/vercel/next.js/pull/11293">Pull Request</a> that comes with the proposal to add support for <code>Paths</code> in <code>tsconfig.json</code> and <code>jsconfig.json</code> by default.
The cool thing is that with this possibility I could solve my problem that had been afflicting me for a long time. Implemented from version 9.4 of NextJS I would simply need to define a <code>baseURL</code> in my config file to support absolute imports.
<pre><code class="language-json">// tsconfig.json or jsconfig.json file

{
 &quot;compilerOptions&quot;: {
 &quot;baseURL&quot;: &quot;.&quot;
 }
}

// Will result in: import Button from &#39;components/button&#39;
</code></pre>
Also I can use a custom prefix, just add a <code>paths</code> in the configuration:
<pre><code class="language-json">{
 &quot;compilerOptions&quot;: {
 &quot;baseURL&quot;: &quot;.&quot;,
 &quot;paths&quot;: {
 &quot;@components/*&quot;: [&quot;components/*&quot;]
 }
 }
}

// It will result in: import Button from &#39;@components/button&#39;
</code></pre>
Remember that code editors like VSCode have automatic support for their settings in <code>jsconfig.json</code> so just click Command+Click to go straight to the file that was defined there and edit it smoothly. And it&#39;s worth noting that <a href="https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion">Atom and IntelliJ</a> also support edits.
I would like to leave as a reference an article by <a href="https://paco.me/writing/better-nextjs-imports">Paco</a> that inspired me to write this article and share it in a simple way.

No more imports detailing for each folder you are browsing, your code cleaner, readable and interesting.

Improve your imports on NextJS

For the last few months I have been working with SCSS on different types of projects, and as I have become more and more interested in NextJS, I would like to integrate with it. That&#39;s why I come through this super simple mini-tutorial to explain how I perform such activity.
With our project already started, let&#39;s start installing some packages, in this example I&#39;ll be using the <code>yarn</code> as my Package Manager, however, feel free to use it with <code>npm</code> if you prefer.
To get started let&#39;s install the Sass package using one of these two commands:
<pre><code class="language-bash">yarn add sass
or
yarn add node-sass
</code></pre>
Right after we will install the Next Plugin. For those unfamiliar with Next Plugins, they basically add functionality without the need for extra configuration.
To install the SASS/SCSS Plugin created by the Next team, we will use the following command in the project terminal:
<pre><code class="language-bash">yarn add @zeit/next-sass
</code></pre>
Now let&#39;s define the SASS/SCSS default in our project, making some changes in the <code>next.config.js</code>, file, if your project doesn&#39;t have this file, just create it with this same name. So let&#39;s put the following configuration in this file:
<pre><code class="language-js">const path = require(&quot;path&quot;);
const withSass = require(&quot;@zeit/next-sass&quot;);

module.exports = withSass({
 cssModules: true,
});

module.exports = {
 /* Add your SCSS file folder path Here! */
 sassOptions: {
 includePaths: [path.join(__dirname, &quot;styles&quot;)],
 },
};
</code></pre>
Now you can start creating and using SCSS/SASS files that work perfectly.
Remember to always import your files with the <code>.scss</code> extension instead of <code>.css</code>.

A super simple mini-tutorial, teaching you how to configure SASS/SCSS on NextJS

How to use SASS/SCSS on NextJS

Creating a blog, and or, a portfolio in my opinion is necessary for every developer, I have this opinion, whether to be found more easily by recruiters, or to share knowledge, in order to evolve the knowledge of the development community as a whole .
The idea of being found by recruiters comes in handy with the community, as the more you are known among the community, recruiters have certainly noticed you within it, as well as being a good space to follow your progress and evolution as a developer.
The idea of sharing knowledge, however, will be very useful for those who are starting out or looking for something different to solve a problem, such as a very specific error or an implementation of code that will hardly be found on a Stack Overflow of life.
<img src="https://i.gifer.com/3cuw.gif" alt="Don&#39;t let your dreams become dreams, just do it!">
Inspired by <a href="https://willianjusten.com.br/">Willian Justen&#39;s blog</a>, I decided to create my personal blog, to share knowledge, whether I have found it through studies or by solving a problem found in my day-to-day.
One thing I have to emphasize is my interest in sharing content in Portuguese and English, as I see that much of the content I read is in English, and I see a lack of content in Portuguese on the subjects I&#39;ve been applying and studying. On top of that it will be a good space for me to practice writing.
The blog will certainly evolve over time, with new things being implemented, new content being created, things being improved on it and bugs being fixed, I hope I can always bring it all with the best possible quality to those who follow, since now, thank you for being part of it! ❤️

Discover my space to share work, studies, knowledge and mark my presence on the web in a way that makes a difference for people.

Hello, i'm Rychillie