Issues that you may face when working with Next.js the first time

Next.js is a very lite weight and performance optimized framework. It is a react framework, and comes with a lot of upgrades to the react app such as SSR, improved performance, built-in lazy loading, fast refresh, among others. First off, let me make a confession that I like Next.js and I like React; both are great. In this article, I want to share with you some of the “issues or problems” that one might face while using this beautiful framework; and the possible solutions. I would suggest you go through these issues especially if your background is React. So that it might help you substantially.

Here we go!

You cannot use window object anywhere other than the useEffect hook. Why? Read what the docs say: Next.js is universal, which means it executes code first server-side, then client-side. The window object is only present client-side, so if you absolutely need to have access to it in some React component, you should put that code in componentDidMount (useEffect hook). This lifecycle method will only be executed on the client. You may also want to check if there isn’t some alternative universal library which may suit your needs.

You cannot use #ids and then refer to those in the module.css of the related component. The workaround for this is to put this id in the global.css file. By putting the ids there, it works the same as normal css.

You cannot target html tag elements in the Component.module.css. For example if you do in a module.css file like this:

label {
  display: block;
}

It will throw a syntax error saying: Selector “label” is not pure (pure selectors must contain at least one local class or id). The workaround for this is to either mention a className before the element, or if that does not do what you desire to achieve then you could also put such code in the globals.css. So that way, we’re making our global css file quite dirty; aren’t we?

If you want to create a modal component, in the next.js it is a bit different than the regular client-side react app. Because it is server side rendered. So when the page first renders, it’s server side and we don’t have access to the window.document object. And we need the getElementById() on the document object to access a specific id in the document to put the model into. And for that, checkout this DEV Recipes article by Alexander Rusev. He explains an easy workaround to use modal components in the next.js.

The <Image /> component. Next.js introduced a new Image component, which is an upgrade to the traditional <img /> tag, and comes with very cool features such as automatic resizing, smaller file sizes, and lazy loading out of the box, among others. The problem which I faced; and probably you might also have faced if you’re new to Next.js was that it forces us to have a height and width property. And it can be a headache, having to set the images to a fixed dimensions or a layout property set to ‘fill’. So I crawled for the solutions and finally found one. Here is the way to fill the available space in the specific parent “area” where the <Image /> is placed (note: this trick works with next.js version 11 (including the sub-versions of 11) or before):

/* JSX Component */

<div className={styles.imageContainer}>
<Image src={imageName} layout="fill" className={styles.image} />
</div>

/* Component.module.css */

.imageContainer {
width: 100%; /* you may change it according to your need */
}
.imageContainer > div {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important; /* you may change the size of width and height according to your need */
height: 100% !important; 
position: relative !important;
}

In the react library, we can set up a proxy with the proxy object in the package.json by doing: "proxy": "http://localhost:3080". Even though Next.js is a React framework it doesn’t work that way at the time of writing. Usually, you start your next server with the next start. If you want to have the custom route patterns for your app then you can do that by setting up a custom server 100% programmatically. You can read more about it from the nextjs docs. It has some limitations such as it will remove important performance optimizations, like serverless functions and Automatic Static Optimization. But go through the ‘custom server’ docs and you may find what you’re looking for.

If your images’ src is a url, then those images won’t be loaded unless you add the url domains of those images in the next.config.js file, inside the module.exports. The next.config.js file is generally located in the root directory. This is how it would look after adding domains:

module.exports = {
 reactStrictMode: true,
 images: {
 domains: [“example.com”], //you may add as many domains as needed
 },
}

There is one more gotcha here. This would be sufficient for the localhost, but when you deploy your app on a production or dev server using the docker build, you will face the same issue again, because the next.config.js file did not get updated in the docker image. To rectify this issue, you’ll need to uncomment an existing line in the dockerfile. This is the line in dockerfile that needs to be uncommented when the default configuration of next.config.js file is changed:

COPY --from=builder /app/next.config.js ./

Replace “app” with your image build’s name. And make sure that the address is correctly pointing to where the next.config.js file is located in your app. Generally the file is in the root directory.

This is the complete code of dockerfile from the nextjs docs.

That’s it. I hope you’ve learned something new today. Keep loving Next.js. It’s a great useful framework to have in your basket.

P.S: I may be updating this article in the future as I find new issues or more solutions worthy to be mentioned.

Cheers 🍷️

Issues that you may face when working with Next.js the first time

Comments

More from this blog

Configure Access and Refresh JWTs in React App

Having problems writing your next programming article?

Command Palette

Comments

More from this blog