Getting Started with NextJS

Author:

Grzegorz Wolfinger

1. Next.js is a framework for ReactJS.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

Why would we then need Next.js?

Because Next.js makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features Next.js has to offer:

1. File-based Routing
2. Built-in Page Pre-rendering
3. Rich Data Fetching Capabilities
4. Image Optimization
5. Much More

File-based Routing

2. Disable CSS Modules in Next.js project.

Next.js turns on CSS Modules by default, and no switch is provided. If you don’t want it, you can modify the webpack configuration in next.config.js:

// next.config.js

const path = require('path');

module.exports = {
  webpack(config) {
    // if not work, try `config.module.rules[2]...`
    config.module.rules[3].oneOf?.forEach((one) => {
      if (!`${one.issuer?.and}`.includes('_app')) return;
      one.issuer.and = [path.resolve(__dirname)];
    });
    return config;
  },
};

This is really helpful for those who prefers to use SCSS or CSS in normal way.

More Content Coming Soon

If you found this blog helpful, and you want to support my work, you can: BuyMeACoffee