Mistakes that you should be aware of if you are moving from React to NextJS

Photo by Isabella and Zsa Fischer on Unsplash

The year is 2022 and NextJS is no longer a fancy framework that can replace react and provide some important features like SEO friendliness that was hard to implement with React. NextJS is now being considered as a very viable alternative for React and even companies like Netflix and Deliveroo are using it in their apps.pr

If you’re a React developer it’s high time you pick up NextJS for your next project or learn its advantages over React to successfully convince your company or client to use it for the right project. Having said that even if you’re using other frameworks like Angular or Vue you can still easily pick up NextJS quickly and start creating apps in it. In this article, we are going to cover some of the most common issues or mistakes developers may come across while moving to NextJS for the first time.

1. Window Object

As mentioned above, we all know that react is a client-side app and next is server-side rendered, so it is pretty obvious that window object is not accessible by default in NextJS. This is one of the most common mistakes people overlook while trying to use window object properties in the NextJS code. For example, assign some dynamic CSS classes based on max-width, we will use the window object but it may not execute correctly when you try to run the app.

To overcome this we must add some checks to make sure that the window object is loaded on the client-side before we try to access its properties. We can do this by adding the part of code that uses the window object inside useEffect hook like this.

Note- If you are reusing this code in multiple components, consider making it a hook.

Sample Code that uses window object to define if the screen is small.

2. Writing Media Queries

As we all know Media query is most commonly used by developers to apply CSS classes dynamically based on different screens. But for media queries like this to work correctly the head of your web page should contain a meta tag for viewport which is automatically set by client-side apps like react. In most cases, people write media queries in NextJS and notice that they are not working. This is because, with SSR apps like Next, this same is not added by default. To fix this issue simply add the meta tag in _app.js inside next/head.

Adding meta tag for the viewport in _app.js.

3. SEO Tags

Just like viewport, there are many other tags that are generally used by SEO while crawling your webpage. And to set these tags in react people used to set these tags for pages by modifying document object properties or using an external library like React Helmet. NextJS being an SEO friendly framework allows us to set these tags with the inbuilt next/head . You can set the properties in your NextPage directly, use common values from constants or event write a functional component that will export all the tags with dynamic values. You can see an example below-

4. Links

In Next JS client-side transitions between routes can be enabled via the Link component exported by next/link. We can write a <a> within Link and add styles to them as we cannot add classes to Links directly. But all links will have an underline by default and to remove them we can add textDecoration property through CSS. This can be through a CSS class which is the best practice or inline CSS.

5. Using CSS in components

This is a silly but tricky part. In React apps we can write either module-based CSS and import them in the components or simply import specific CSS files and use them in the className property. Many people use the latter method as it allows direct use of classes without style objects, it is easier to write with hyphen cased CSS classes. Usually, people create folders for components with an index file and a CSS file and use the styles in index files like this,

But you cannot follow the same pattern in NextJS. So you have to take care of a few things if you are used to the above approach

• Create a .module.css or SCSS file for writing component-based CSS.
• Import the CSS in the component as a style object.
• Apply CSS using className ={styles.className}.
• Use camelCased class names unless you want to use bracket notation.
• Try to use a single className for an element unless you want to use string interpolation for styles object ( not very clean)

Example code:-

6. Using next/image

Everyone is used to the HTML <img> for displaying images on web pages. But you will notice that if you try to use this conventional HTML tag NextJS will throw an error asking you to use built-in next/image. While next/image provides better performance and automatic Image Optimization, it is a little tricky to style the image.

For example, to set the width and height you must use the mandatory properties that come with it instead of CSS classes, like how we are used to. If we want to adjust the height and width to make images responsive we will have to define variables for their height and width properties and change them dynamically. This is the recommended approach. But in case you wish to do things the old way, an alternative approach would be to add a wrapper element ( div) and apply the required CSS like usual on that element and apply layout=fill for the image. But please note that this has a drawback that the wrapping div should have position: relative .

7. Static Assets

If you are a react developer you are probably used to storing font files in a folder within ‘src’. While Create React App uses the public directory for the entry HTML file, Next.js uses it for storing static assets. So your fonts and other images should be stored inside the public folder for them to be loaded properly in the NextJS app. For example to use self-hosted fonts with next,

1. Add font files to /public/assets/fonts

2. In your global.css declare fonts

3. Make sure that global.css is imported into your _app.js .

Similarly, you must move any images, fonts, or other static assets to public folder for use in the app.

These are just some of the issues that I faced while trying to migrate a project from React to NextJS. Thanks for reading.