DEV Community: Tauleshwar Thakur

Upgrade Your Existing Projects To Next Js 13

Tauleshwar Thakur — Sun, 18 Dec 2022 08:59:11 +0000

Vercel recently announced Next Js 13 (stable) at Next Js Conf, and it comes with some great and useful features which made Next Js even faster and more efficient in Development and Production.

Overall developer experience has been very smooth with the addition of new features like

app Directory (beta)
TurboPack ( alpha )
New next/image
Improved next/link
New @next/fonts ( beta )

Well, discuss each new feature in a separate post meanwhile let me introduce them in brief.

You can read about them on Next Js official blog

app Directory ( beta )

Next Js added a new file structure, now instead of using the pages directory as our main directory, we can also use the app directory which comes with new features and a routing system.

In regular pages structure, we used to organize our projects like the one below.

ProjectName
-pages
    📁blog
        index.js
        [slug].js
    _app.js
    index.js
-public
-src
-styles
-package.json

Now we can use app directory for our main pages like below


ProjectName
-app
    📁blog
        page.js
        [slug].js
        layout.js
    layout.js
    page.js
-public
-src
-styles
-package.json

the new app directory requires page.js instead of index.js, the app directory, and each subdirectory should contain a page.js, and we may create layout.js for layouts, error for errors when components fail to load in each directory but are optional.

This is a new feature and is still in the beta version, so it is not recommended to use in production yet.

TurboPack ( alpha )

Next Js is replacing Webpack with the Rust-based bundling and build toolTurboPack for better and faster build and reload. It is still in the alpha version.

@next/fonts

Next Js 13 introduces a new fonts library which will automatically host all the necessary fonts locally inside the project so we don’t have to import from remote CDN while staying in our project which prevents layout shifts when page load delays.

New next/link

Now we don have to use an extra <a> tag inside <Link> components as new next/link will automatically add an <a> inside to the page which is absolutely awesome.

New next/image

With improved next/image, now we don’t have to give the height and width for local images, Next Js will automatically set width and height according to the width and height of the image,

Note: this only works for local images if you’re importing images from the remote server you still have to provide width and height in numeric value.

New next/image comes with the native lazy loading support which boosts the performance and load time.

Upgrading existing projects to Next Js 13

We can incrementally upgrade our existing Next Js 12 or any older Next Js project to Next Js 13, which means we can still use new features of Next Js 13 in our project which are ready for the production environment.

Which are

next/image
next/link

So in this guide, we’ll see how can we upgrade to Next Js 13 and update our old code base easy to use new components with the help of codemod.

To update your Next js project to Next Js 13 use one of the following commands according to your environment

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# or
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# or
pnpm up next react react-dom eslint-config-next --latest
after running the above command check your package.json for the latest Next Js version

Now we’ll use codemod to incrementally update our codebase for new components and add legacy support if we wish to use older libraries along with the new ones.

@next/codemod

Next.js provides Codemod transformations to help upgrade your Next.js codebase when a feature is deprecated.

Codemods are transformations that run on your codebase programmatically. This allows for a large number of changes to be applied without having to manually go through every file.

Read more about codemod on the official documentation.

Install codemod in your project if you haven’t already by using the following command

npm install @next/codemod@latest

next/link

components earlier needed and <a> tag as a child to work properly but in Next Js 13 it is no more necessary as next js automatically added a <a> tag in our page so we don’t need to pass <a> tag as a child in components anymore.

Below is the comparison between the old and new link component


import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a className="nav-links">Home</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>` under the hood with all the props
<Link href="/about" className="nav-links">
  About
</Link

to update all your existing components to new style tag run the following codemod

npx @next/codemod new-link /pages

// new-link is the codemod defined by next js team
// ./pages is the path where codemod will be executed
npx @next/codemod@latest <transform> <path> // use this syntax

you can use
--dry to do a dry run, no code will change.

--print to see the changes that happened

Example

npx @next/codemod new-link /pages --dry //will show the pages eligible for change
npx @next/codemod new-link /pages //will change all old <Link> tag to new one
npx @next/codemod new-link /pages --print //will show what changes happened

after running the new-link codemod all your old style components will update with the new style and all the attributes and props of <a> tag will be assigned to tag.

import Link from 'next/link'

//OLD
<Link href="/about">
  <a className="nav-links">Home</a>
</Link>

//NEW 
<Link href="/about" className="nav-links">
  About
</Link

next/image

As soon as we updated our project to Next Js 13 the new next/image library was installed so now we have to follow the style of the new next/image and the old next/image is renamed to next/legacy/image so if we want to see the old image library we have to add support legacy library and we can do this in seconds with the help of codemod given below

//changes all next/image import to next/legacy/image in all files inside ./pages directory
//if you want to do this in another directory the chage ./pages => newPathname
npx @next/codemod@latest next-image-to-legacy-image ./pages

after running above codemod

below code

import Image1 from 'next/image';
import Image2 from 'next/future/image';

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  );
}

will change to

// 'next/image' becomes 'next/legacy/image'
import Image1 from 'next/legacy/image';
// 'next/future/image' becomes 'next/image'
import Image2 from 'next/image';

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  );
}

now you can use old as well as new next/image and gain great performance while maintaining old style of your webpage.

I hope you find this guide helpful, you can read this on my blog too.
Happy coding 🙂

How to use Particles Js in React with react-tsparticles.

Tauleshwar Thakur — Wed, 25 May 2022 18:31:00 +0000

Particle.js is a great JavaScript library for creating 2d as well as 3d looking particles on your website.

But using Particle.js is not an easy task so there is a new version of Particles.js created for Component-based frameworks like React, Vue, and Angular which is rewritten in TypeScript and is called TsParticles and has a special package for easy integration in React called as react-tsparticles.
react-tsparticles is an awesome package for creating particles in React.js.

Prerequisites

Create a new React app with npx create-react-app my-app or you can continue with your existing app if you have already created.

Now we'll have an App.js file in my case here it is after some editing.



import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

How to use `react-tsparticles` in React.js

First of all you have to install react-tsparticles as well as tsparticles as react-tsparticles depends upon it.

npm i react-tsparticles
npm i tsparticles

if any legacy error shows up use --force

npm i react-tsparticles --force
npm i tsparticles --force

Now import Particles from react-tsparticles and { loadFull } from tsparticles.



import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

Now we can use Particles component by passing some props such as id, init which is going to be an initialization function, options which is going to be the configurations for particles that we want to display or url to use options from a remote url with a json url.
Link to tsparticles options presets



import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {



  return (
    <div className="App">
      <h1>Hello Coders!</h1>

      <Particles id="particles-here" init={anInitFunction} options={
        // an config object
      } />

    </div>
  );
}

Below is the working code for above method



import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {
  const particlesInit = async (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };

  return (
    <div className="App">
      <h1>Hello Coders!</h1>

       <Particles
      id="tsparticles"
      init={particlesInit}

      options={{
        "fullScreen": {
            "enable": true,
            "zIndex": 1
        },
        "particles": {
            "number": {
                "value": 10,
                "density": {
                    "enable": false,
                    "value_area": 800
                }
            },
            "color": {
                "value": "#fff"
            },
            "shape": {
                "type": "star",
                "options": {
                    "sides": 5
                }
            },
            "opacity": {
                "value": 0.8,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 1,
                    "opacity_min": 0.1,
                    "sync": false
                }
            },
            "size": {
                "value": 4,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 40,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "rotate": {
                "value": 0,
                "random": true,
                "direction": "clockwise",
                "animation": {
                    "enable": true,
                    "speed": 5,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance": 600,
                "color": "#ffffff",
                "opacity": 0.4,
                "width": 2
            },
            "move": {
                "enable": true,
                "speed": 2,
                "direction": "none",
                "random": false,
                "straight": false,
                "out_mode": "out",
                "attract": {
                    "enable": false,
                    "rotateX": 600,
                    "rotateY": 1200
                }
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": ["grab"]
                },
                "onclick": {
                    "enable": false,
                    "mode": "bubble"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 400,
                    "line_linked": {
                        "opacity": 1
                    }
                },
                "bubble": {
                    "distance": 400,
                    "size": 40,
                    "duration": 2,
                    "opacity": 8,
                    "speed": 3
                },
                "repulse": {
                    "distance": 200
                },
                "push": {
                    "particles_nb": 4
                },
                "remove": {
                    "particles_nb": 2
                }
            }
        },
        "retina_detect": true,
        "background": {
            "color": "#111",
            "image": "",
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover"
        }
    }}
    />
    </div>
  );
}

and you'll get this

now you can mess around with options and below is the GitHub repo of list of different presets that you can use to get different particles.

Read this on my blog.

PS: This is my first post and I am looking for your suggestions and of course I'll improve this post with more information.