When using the Next.js `Image` tag, you must add the `width` and `height` attributes, or `layout="fill"` or your application will not compile. You have to add something like:

```jsx
<Image
  src={"/images/me.png"}
  alt="an image of the author"
  width={50}
  height={50} 
/>
```

This is all well and good but what if your image is coming from some external source and you want to fill the entire width and keep the image's aspect ratio? Essentially, you want to set `width: 100%` and `height: auto`. With a regular image tag, this is easily done, but with the Next.js `Image` tag, [many developers](https://github.com/vercel/next.js/discussions/18739) have struggled with it. 

After crawling through many forums, [arnovanstaden](https://github.com/arnovanstaden) posted a solution on the Next.js [github page](https://github.com/vercel/next.js/discussions/18739).

You must add a container div around your `Image` tag, and add the following styles.

```html
<div className="imageContainer">
        <Image src={somePath} 
           layout="fill" 
           className="image" 
        />
</div>
```

```css
.imageContainer {
        width: 100%;

        >span {
            position: unset !important;
        }

        .image {
            object-fit: contain;
            width: 100% !important;
            position: relative !important;
            height: unset !important;
        }
    }
```

**Note:** You may need to change `span` to `div`. Use the dev tools in your browser to see how it is rendering.

And there you have it! 

Are you having trouble filling the entire width of the parent container while maintaining the images aspect ratio? Here is a solution

Prefer to watch a video? This tutorial is now available on [YouTube](https://www.youtube.com/watch?v=5EeEkEA75Ts&ab_channel=CodewithRyan).

To add [google analytics](https://analytics.google.com) to your Next.js application, first add a new environment variable. You may also need to add this variable where you are hosting your site.

```:.env
GOOGLE_ANALYTICS="<your ga tag goes here>"
```

Then, either in your `_app.js`, or if you have one, `_document.js` file, add the following in the Next.js `Head` tag:



```tsx:_app.js
<Script
  strategy="lazyOnload"
  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS}`}
/>

<Script id="ga-script" strategy="lazyOnload">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '${process.env.GOOGLE_ANALYTICS}', {
      page_path: window.location.pathname,
    });
        `}
</Script>
```

And there you have it, you have added google analytics to your Next.js application!

In this short article, I will show you how to add google analytics to your Next.js application.

![Ryan Carmody personal projects](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_3_e5dbc95e5b.png)

Most of the time, I am chipping away at a personal coding project. I love working on these as I get to complete a something from end to end, including the design, development, deployment and maintenance. These projects often need skills that I currently don't have, so I will spend a lot of time reading and learning so I can get the job done.

Here are the most recent personal projects I have worked on.

## Smug Chicken

![smug-strapi.png](https://ryancarmody-blog.s3.amazonaws.com/smug_strapi_674e27c016.png)

**Check it out at:** [smugchicken.com](https://smugchicken.com). **Stack:** Angular 15, RxJS, Node.js, MongoDB, Heroku, Firebase and Twitter API.

What happens when you blend AI and Wordle? Smug Chicken! 🐔
 
Smug Chicken is an image-based word game where players must guess the two words entered into an AI art generator to create the resulting grid of four images. 

I got the pleasure of working on this game with my long time friend, [Haydn Kenny](https://www.linkedin.com/in/haydn-kenny-media/). This was a refreshing change as I usually work on web development projects by myself. It was great to be able to workshop ideas and create the best possible product.

So I guess the question is now, are you a smug chicken today?

## WhereTaken

![My project-1 (2).png](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_2_fb63c1599e.png)

**Check it out at:** [wheretaken.com](https://wheretaken.com). **Stack:** Angular 14, RxJS, Node.js, MongoDB, Heroku, Firebase and Twitter API.

I am a big fan of the daily games that became popular during COVID times, e.g. Wordle, Worldle, Flagle etc. I decided to build my own called WhereTaken. You have 6 chances to guess what country it is based on a single photograph. 

I used Angular 14 for the frontend with RxJS to create a completely reactive application. The game also keeps track of how many guesses people took to complete the game as well as their first guess. This information is passed to the Node.js backend and stored in a MongoDB database. That data is then used to show the global daily stats when users have completed the game.

I also have a Twitter Bot active for the [WhereTaken twitter account](https://twitter.com/wheretakengame), which is made using the Twitter API. It will automatically tweet yesterday's photo and answer, the stats from yesterday and will retweet a post related to WhereTaken.

The frontend Angular app is hosted on Firebase and the Node.js backend on Heroku. 

## Retro Snake

![Retro snake](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_03_06_pm_70bdc8e0c9.png)

**Check it out at:** [playretrosnake.com](https://playretrosnake.com). **Stack:** Angular 14, RxJS and Firebase.

I made this game while trying to improve my skills in creating reactive apps with Angular and RxJS. The game has a global state object which all components subscribe to. When a user presses the WASD keys, it will update the global state and change the direction on the next frame of the game. 

This game is hosted on Firebase.

## Odds Pony

![Play retro snake cover image](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_27_23_pm_2bda994a31.png)

**Check it out at:** [oddspony.com](https://playretrosnake.com). **Stack:** Angular 14, RxJS, NodeJS, MongoDB, reCAPTCHA, Firebase and Heroku.

I built this application when I wanted to work on a project that handled massive amounts of data. This application scans thousands of odds, which come from an API and gives users useful insights.

I have no interest in gambling/betting, but this was a great opportunity for me to work with an external API, process data and present it back in a meaningful way. Users can sign up for an API key from the data provider, and I make a percentage of those sales. It has created a nice monthly passive income for me. 

## Your budget summary

![Your budget summary cover image](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_34_16_pm_d8f192a321.png)

**Check it out at:** [yourbudgetsummary.com](https://yourbudgetsummary.com). **Stack:** Angular 13.

I made this project a couple of years ago. It is an application that will take in your income and expenses, and display your budget summary in a nice table at the bottom. 

When I built this, I had been working at RAA for a number of months and had started to gain some knowledge in Angular. I wanted to work on a project, end to end to reiterate some of the things I had learnt.




Most of the time, I am chipping away on some personal coding project. Check in here to see what I am currently working on!

![Code blocks with syntax highlighting in Next.js](https://ryancarmody-blog.s3.amazonaws.com/White_Decorative_Daily_Vlog_Youtube_Thumbnail_1_365f7f4093.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=BNCrfJKnhJI" />

## Table of contents
- [Prerequisites](#prerequisites)
- [Step 1: Serialize your markdown with next-mdx-remote](#step-1-serialize-your-markdown-with-next-mdx-remote)
- [Step 2: Install rehype-prism-plus and rehype-code-titles packages](#step-2-install-rehype-prism-plus-and-rehype-code-titles-packages)
- [Step 3: Add mxdOptions to your serialize function](#step-3-add-mxdoptions-to-your-serialize-function)
- [Step 4: Add a Prism.js theme](#step-4-add-a-prismjs-theme)
- [Step 5: Add a code block to your markdown](#step-5-add-a-code-block-to-your-markdown)

## Prerequisites

I will be adding code blocks with syntax highlighting to the blog that I built in the tutorial video [How to make a blog with Next.js, Strapi and GraphQL](https://www.youtube.com/watch?v=jF4_yiO3HVc). You can also view the [source code](https://github.com/rjc23/make-a-blog) of the blog.

The blog uses the [next-mdx-remote](https://www.npmjs.com/package/next-mdx-remote) package which serializes the markdown from a Strapi CMS. You may also have your markdown files locally in your project e.g. `my-first-blog-post.mdx`. This tutorial will still work for you.

If you have not set up your project using `next-mdx-remote`, don't worry, step one will take you through it.

## Step 1: Serialize your markdown with `next-mdx-remote`

If you have not got `next-mdx-remote` installed, run the following in your terminal

```bash
 npm install next-mdx-remote
```
OR if using yarn
```bash
yarn add next-mdx-remote
```

There are multiple ways to convert markdown from a CMS or file system to JSX. For this tutorial, we are using the `serialize` function from `next-mdx-remote`. Here is a snippet from the `getStaticProps()` function. This example is using GraphQL to pull down content from a CMS, but you might be pulling the markdown in from other sources.

```jsx:[slug].js
export async function getStaticProps({ params }) {

    // Get data using GraphQL (This could also be REST API or local mdx files)
    const { data } = await client.query({
        query: GET_INDIVIDUAL_POST,
        variables: { slugUrl: params.slug }
    });

    const attrs = data.blogPosts.data[0].attributes;

    // Serialize the markdown
    const html = await serialize(attrs.content);

    return {
        props: {
            post: {
                title: attrs.title,
                content: html
            }
        }
    }
}
```

Then in the component we can put

```jsx:[slug].js
export default function Post({ post }) {
    return (
        <div>
            <h1>{post.title}</h1>
            <MDXRemote {...post.content} />
        </div>
    )
}
```

The only code, other than CSS we need to change is the following from the snippet above.

```jsx:[slug].js
    // Serialize the markdown
    const html = await serialize(attrs.content);
```

## Step 2: Install `rehype-prism-plus` and `rehype-code-titles` packages

We are going to need to install two packages. You can do that by running the following

```bash
npm install rehype-prism-plus
npm install rehype-code-titles
```
OR if you're using yarn
```bash
yarn add rehype-prism-plus
yarn add rehype-code-titles
```

## Step 3: Add mxdOptions to your serialize function

First import the packages into `[slug].js`, or wherever you serialize your markdown
```jsx:[slug].js
import rehypePrism from 'rehype-prism-plus';
import rehypeCodeTitles from 'rehype-code-titles';
```

then add the following `rehypePlugins` to `mdxOptions` in the `serialize` function

```jsx:[slug].js
    const html = await serialize(attrs.content, { mdxOptions: {
        rehypePlugins: [
            rehypeCodeTitles,
            rehypePrism
        ]
    } });
```

## Step 4: Add a Prism.js theme

You need to add a Prism.js theme, which is just a single CSS file, to your project. Check out this [long list of Prism.js themes](https://github.com/PrismJS/prism-themes). Choose one and add the CSS styles to your project so they are available globally.


## Step 5: Add a code block to your markdown

Code blocks are added in markdown with three back ticks (`). Here is an example

````
## Lets code a for loop in C++

In this tutorial, we will loop through a for loop and print out the values of i

```cpp:main.cpp
for(int i = 0; i < 10; i++) {
     std::cout << i << std::endl;
}
```
````

Notice how we add the language we are using, separated by a colon, then the file name (optional). Prism.js supports a number of [different programming languages](https://prismjs.com/#supported-languages).

The output from the code block in the above section is

```cpp:main.cpp
for(int i = 0; i < 10; i++) {
     std::cout << i << std::endl;
}
```

That's it! You have now successfully added code blocks with syntax highlighting to your Next.js blog!

In this short tutorial, we will add code blocks with syntax highlighting to a markdown Next.js blog using the Prism.js library.

/category/nextjs

Latest articles

Next.js Image Tag - How to fill the entire width of the parent container & maintain the image's aspect ratio

How to add google analytics to your Next.js application

My personal projects

How to add code blocks with syntax highlighting to a Next.js blog using MDX with Prism.js