
By this time, you might already know about [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API). In short, they provide mechanism for animating transition between two DOM states. For example, if you want to smoothly transition from one page to another page, you can do so with view transitions API.

In the past, I had implemented [page transitions using React Transition Group](https://veerasundar.com/blog/how-to-animate-page-transition-in-react-using-styled-components/). It seemed little complex to understand, and it didn't work well with accessibility. Now that browsers provide an in-built API to do the page transitions, it's time to update.

There's a great example in Chrome for Developers page that shows [how to implement the view transitions API](https://developer.chrome.com/docs/web-platform/view-transitions). In this blog post, let me show you a simple implementation in my blog that uses Next.js.

## Before View Transitions

As you can see in the below GIF image, when I navigate to different pages in my blog, the browser loads the new page without anu smooth animation.

![page navigation without any transition](/img/before-transition.gif)

## After View Transitions

Let's take a look at the same page navigation, but this time with view transitions added. (_The animation is not smooth, because of GIF, but in browser it will be butter smooth.)_

![page navigation with view transitions](/img/after-transition.gif)

## View Transition Implementation in Next.js application

I use Next.js to build my blog. Next.js provides a `Link` component to render hyperlinks and navigate to the pages. We can wrap this `Link` component in our custom `LinkTransition` component that enables the view transition.

```jsx
// LinkTransition.jsx

import Link from "next/link";
import { useRouter } from "next/navigation";

function LinkTransition(props) {
  const router = useRouter();
  const handleClick = (e) => {
    if (!document.startViewTransition) {
      // browser does not support view transition. Continue the default behavior.
      return;
    } else {
      // browser supports view transition. Animate the transtion.
      e.preventDefault();
      document.startViewTransition(() => {
        router.push(props.href);
      });
    }
  };

  return (
    <Link onClick={handleClick} {...props}>
      {props.children}
    </Link>
  );
}
export default LinkTransition;
```

Once we have this component, you can use it in place of `Link` component to have the page navigation transitioned.

## Customizing the transition animation

By default, the view transition API just fades in / fades out the DOM elements. But you can customize the animation via CSS, by applying animations to `::view-transition-old` and `::view-transition-new` pseudo-elements. For example, here is a sliding animation, taken from [Chrome Web Developer page](https://developer.chrome.com/docs/web-platform/view-transitions).

```css
/* global.css */

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
```

## Conclusion

Implementing page transitions have never been this much easier - thanks to View Transition API. [Not all the browser supports](https://caniuse.com/mdn-api_viewtransition) it yet, but until they do, we can progressively enhance the user experience in browsers that do support it (Chrome / Edge).


Implementing view transitions in a Next JS application using React

This blog was used to be statically generated with [Jekyll](https://jekyllrb.com/), but not anymore!

I replaced Jekyll with Next.js, because I wanted to move away from Ruby gems . In this post, let me tell you how I did the move, so if you ever wanted to move yours, it would help you.

## The plan

Here's the overview of steps that I planned for the move.

1. Set up the Next.JS framework to compile blog posts written in markdown format
2. Transform Jekyll blog posts from the `YYYY-MM-DD-post-name.md` format to `post-name.mdx` so Next.JS could understand it.
3. Setting up code highlighting
4. Set up `nginx` server to rewrite old URLs to new ones.

Now, let's get to the execution part of it.

### 1. Setting up Next.js framework to compile markdown files

By default, Next.js won't recognize [mdx](https://mdxjs.com/) files. There are several tools available to make Next.js work with mdx - [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) is one such tool. I followed this [example setup](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote) from Next.js which provides a base structure to compile mdx files.

After cloning, I customized the folder structure and styles to my liking.

### 2. Transforming old Jekyll posts

I used to save my Jekyll blog posts in `YYYY-MM-DD-post-name.md` format - which won't work (or need customization) in Next.js. So, I had to move all my existing files to the `post-name.mdx` format.

I also had to copy the post date, which was originally part of the file name, into the front matter of my posts. For this, I used [gray-matter](https://www.npmjs.com/package/gray-matter) npm package.

Here's a script that I wrote for the conversion.

```javascript
const fs = require("fs")
const path = require("path");
const matter = require("gray-matter");

const POSTS_FOLDER = path.join(__dirname, "_posts");
const OUT_FOLDER = path.join(__dirname, "out");
try {
  const posts = fs.readdirSync(POSTS_FOLDER);
  for(let i=0; i<posts.length; i++) {
    const post = posts[i]
    const date = post.substr(0,10);
    const fileName = post.substr(11).replace(".md", "");
    const fileContent = fs.readFileSync(path.join(POSTS_FOLDER, post), 'utf8')

    const parsed = matter.stringify(fileContent, {
      publishedOn: date
    })

    fs.writeFileSync(path.join(OUT_FOLDER, `${fileName}.mdx`), parsed)
  }
} catch (e) {
  console.error(e)
}
```

Once converted, I copied all the files from my output folder to my Next.js instance.

### 3. Setting up code highlighting with remark-prism

I share a lot of coding examples in my blog. In Jekyll, I was using `rouge` highlighter for pretty printing my code. In Next.JS I have to use `remark-prism` for this purpose. `npm install remark-prism` then initialize it where you are [rendering mdx to string](https://github.com/vercel/next.js/blob/canary/examples/with-mdx-remote/pages/posts/%5Bslug%5D.js#L71) like this

```javascript
import remarkPrism from "remark-prism";
// ....
// ....
const mdxSource = await renderToString(content, {
    components,
    // Optionally pass remark/rehype plugins
    mdxOptions: {
      remarkPlugins: [remarkPrism],
      rehypePlugins: [],
    },
    scope: data,
  });
```

Also, I had to manually search and replace all my code block markers to the new template. For example, `{% highlight javascript %} code block {% endhighlight %}` to ` ```javascript  code block ``` `

### 4. Setup nginx to rewrite URLs from old format to new format

My Jekyll posts used to have the URL of `https://veerasundar.com/blog/post-name` - which is unnecessarily long. I wanted to remove the year/month information from the URL. The new format will be `https://veerasundar.com/blog/post-name` which is much simpler. At the same time, I don't want to break all my existing URLs. So, I needed a server set up which will redirect requests to my old URLs to new ones. Here's the change I made for this

```bash
 location /blog {
        rewrite ^/blog/[0-9]+/[0-9]+/(.*)/$ /blog/$1.html permanent;
        rewrite ^/blog(/?)$ /blog.html permanent;
        try_files $uri $uri.html =404;
}
```

That's all I had to do to move my blogging platform from Jekyll to Next.js. If you have any questions or need help in the above process, please feel free to reach out to me.


#nextjs (2)