
In [styled-components](https://styled-components.com), there is a `styled(SomeComponent)` notation, which is a very useful tool for customizing some components. But sometimes, it doesn't work. But how? And why?

**TLTR**: `SomeComponent` must accept a passed-in `className` prop.

See this [CodeSandbox](https://codesandbox.io/s/styled-notation-0br3z9), the `TextLinkA` component CANNOT be customized by `styled()`. But `TextLinkB`, on the other hand, CAN!

The difference between them is the `...rest` prop which also includes `className`❗

In the styled-components [document](https://styled-components.com/docs/advanced#styling-normal-react-components), it says:

> If you use the ` styled(MyComponent)` notation and `MyComponent` does not render the passed-in `className` prop, then no styles will be applied. To avoid this issue, make sure your component attaches the passed-in `className` to a DOM node.

Because styled-components generates a random string as the `className` for each _StyledComponent_ (the component defined by styled-components), this `className` contains the styling CSS. When using the `styled()` notation to wrap a StyledComponent, a new `className` is generated, but the styles are not applied unless we pass this new `className` to the original StyledComponent.

In the CodeSandbox example, I use `...rest` to represent all of the other props, but we can also specify it with `className`.


How to make sure the styled() notation in styled-components works, and the reason of it.

Why `styled()` Notation Doesn't Work


Yesterday people in the Discord of [CSS for JS Developers Course](https://css-for-js.dev) asked whether there's any solution to achieve a full-bleed image within a wrapper with a maximum width.

## My Solution

So I tried this out:

```html
<article>
  <p>...</p>
  <img class="full-bleed" src="" />
  <p>...</p>
  <p></p>
</article>

<style>
  article {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .full-bleed {
    max-width: 100vw;
  }
</style>
```

The entire code is in [this Codepen](https://codepen.io/cyishere/pen/RwMbPeX).

## Other "Trick"

Then [Josh](https://www.joshwcomeau.com/) shared [this solution](https://css-tricks.com/full-bleed/) posted on _CSS-Tricks_. I think the solution is very COOL.

```css
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
```

This does not require any additional settings. In my case, I set the elements in the `article` to Flexbox layout, which may cause some unexpected problems.

## More Reading

- [Full-Bleed Layout Using CSS Grid](https://www.joshwcomeau.com/css/full-bleed/)


Solutions for a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column

Full Bleed within A Constrained Wrapper


I recently refactored this blog using [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote). Previously, I used [@next/mdx](https://www.npmjs.com/package/@next/mdx). I'll explain the differences between these two methods and why I chose `next-mdx-remote` in the article.

## The Very Complex `@next/mdx` Way

With `@next/mdx`, the Next.js can read every MDX file as a page. The file structure looks like this:

```bash
- pages/
	- blog/
		- article-1.mdx
		- article-2.mdx
		- article-3.mdx
	index.tsx
	about.tsx
```

There is also no need to create a file like this `pages/blog/[slug].jsx` to dynamically display the articles. This seems very convenient. But the disadvantage is that the structure of each MDX file becomes very complex.

**First**, we must import the layout component that each article page requires and export a default component wrapped in this layout:

```markdown {3-7}
// article-1.mdx

import { PostLayout } from "@/components/Layout";

export default ({ children }) => (
<PostLayout meta={meta}>{children}</PostLayout>
);

// The main markdown content
This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.
```

**Second**, if we require additional components in this file, we must manually import them. For example, if I created a `Figure` component to display images, I must import it into each post's MDX file:

```markdown {4}
// article-1.mdx

import { PostLayout } from "@/components/Layout";
import Figure from "@/component/Figure";

export default ({ children }) => (
<PostLayout meta={meta}>{children}</PostLayout>
);

This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.

// Then use `Figure` in the main content

<Figure
  alt="slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/slideshow-screenshot.png"
  width={900}
  height={600}
/>
```

**Finally**, we must create an object to serve as `frontmatter` and pass it to the default component:

```markdown {5-11,14}
// article-1.mdx

import { PostLayout } from "@/components/Layout";

export const meta = {
title: "@next/mdx Or next-mdx-remote",
description:
"When building a blog with MDX and Next.js, there are so many ways. In this article, I'll show you why I choose next-mdx-remote instead of @next/mdx.",
createdAt: "2022-06-26",
tags: ["mdx", "next.js"],
};

export default ({ children }) => (
<PostLayout meta={meta}>{children}</PostLayout>
);

// The main markdown content
This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.
```

## The Clean `next-mdx-remote` Way

With `next-mdx-remote`, we can write an article in **normal** markdown syntax:

```markdown
// article-1.mdx

---

title: "@next/mdx Or next-mdx-remote"
description: "When building a blog with MDX and Next.js, there are so many ways. In this article, I'll show you why I choose next-mdx-remote instead of @next/mdx."
createdAt: "2022-06-26"
tags: ["mdx", "next.js"]

---

This is a text block.

## This Is a Heading

<Figure
  alt="slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/slideshow-screenshot.png"
  width={900}
  height={600}
/>

This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.
```

We place meta data between two `---`, use any component without importing it in each file, and do not need to import the page layout.

To generate pages for each article, we use the _Next.js way_.

```jsx {3,10}
// pages/blog/[slug].jsx

const PostPage = ({ mdxSource, meta }) => {};

export default PostPage;

/**
 * Get artciel date in `getStaticProps` function
 */
export function getStaticProps({ params }) {
  // omitted

  return {
    props: {
      mdxSource, // The main content in each mdx file
      meta, // The frontmatter part
    },
  };
}
```

To use the custom components, we pass them to the `MDXRemote`'s `component` prop, which is from `next-mdx-remote`:

```jsx {7-14,20}
// pages/blog/[slug].jsx

import { MDXRemote } from "next-mdx-remote";
import { PostLayout } from "@/components/Layout";

const PostPage = ({ mdxSource, meta }) => {
  const components = {
    a: ({ children, ...props }) => (
      <Link {...props} passHref>
        <a>{children}</a>
      </Link>
    ),
    Figure,
  };

  return (
    <PostLayout>
      <h1>{meta.title}</h1>
      // Show the article content
      <MDXRemote {...mdxSource} components={components} />
    </PostLayout>
  );
};

export default PostPage;

// omitted
```

[Here](https://github.com/cyishere/cyishere2022/blob/main/pages/blog/%5Bslug%5D.tsx) is the entire code.

## Conclusion

Article pages can be generated from MDX files or dynamic routes; they are all static pages that are generated at build time. However, as shown in the code above, the `next-mdx-remote` method keeps the files cleaner and allows you to use the `getStaticProps` function. I hope this article could help you in deciding which to use.


When building a blog with MDX and Next.js, there are so many ways. In this article, I'll show you why I choose next-mdx-remote instead of @next/mdx.

@next/mdx VS. next-mdx-remote

@next/mdx Or next-mdx-remote


## The Needs

There are blogs, websites, and online documents that have their code block with some lines highlighted. As in the screenshot below.

<Figure
  src="https://res.cloudinary.com/cyishere/image/upload/v1656157038/cyishere/blog/code-block-with-highlighting-lines_newky9.png"
  alt="Screenshot: code block with highlighting lines"
  width={664}
  height={457}
/>

I always want to implement this cool thing for my own blog which is made of Next.js and MDX. I use [Prism.js](https://prismjs.com/) for highlighting the syntax of the code block. However, I couldn't find a way to enable its [Line Highlight plugin](https://prismjs.com/plugins/line-highlight/).

## The Flawed Way

My old approach was calling Prism in `useEffect`:

```js {2,5-9}
// This is the blog post layout component
import Prism from "prismjs";

const BlogPost = (props) => {
	useEffect(() => {
		if (typeof window !== "undefined") {
			Prism.highlightAll()
		}
	}, []);

	return (
		// omitted
	)
}
```

This approach cannot implement line highlight (at least not that I am aware of).

## The Right Way

After a VERY LONG time of research, I finally discovered a solution: instead of using `prismjs` with `next-mdx-remote`, we can use [rehype-prism-plus](https://www.npmjs.com/package/rehype-prism-plus) with `next-mdx-remote`.

As the `next-mdx-remote` [official document says](https://github.com/hashicorp/next-mdx-remote#apis) when we serialize the MDX content, we can use `remarkPlugins` and `rehypePlugins`. `rehype-prism-plus` is one of the "rehypePlugins".

So with putting `rehypePrism` in that `rehypePlugins` array, we can use `rehypePrism` just like it should be and without any additional configurations. The code is something like this:

```jsx {2,17}
// This is the UPDATED blog post layout component
import { serialize } from "next-mdx-remote/serialize";
import rehypePrism from "rehype-prism-plus";

const BlogPost = (props) => {
  // omitted
};

export const getStaticProps = async ({ params }) => {
  const content = {
    // omitted, not really like this
  };

  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [rehypePrism],
    },
  });

  return {
    // omitted
  };
};
```

[Here](https://github.com/cyishere/cyishere2022/blob/main/pages/blog/%5Bslug%5D.tsx) is the whole code of this blog post page.

<Figure
  src="https://res.cloudinary.com/cyishere/image/upload/v1656157038/cyishere/blog/dom-with-extra-class_mvv4lt.png"
  alt="Screenshot: DOM with extra class"
  width={516}
  height={408}
/>

With this setup, if we inspect the code block with the Chrome dev tool, we can see that line 2 and line 16 have an extra class `highlight-line` (as seen in the screenshot above). Make sure the stylesheet for code block has `highlight-inline` style defined.

```css
code[class*="language-"] .highlight-line {
  background-color: hsl(256deg 100% 96%);
  display: block;
}
```

I import this stylesheet in the `_app.tsx` file to make it use globally.


Make lines highlighting with Prism.js in markdown(mdx) code block.

Highlight Lines in Code Block with Prism.js and MDX


This article is about how to give the navigation items for each page in the new static site generator - [Astro](https://astro.build) - an active-state style. (What a long sentence. 😮‍💨)

And there are _two_ ways. (These code are written in [Astro Component](https://docs.astro.build/en/core-concepts/astro-components/#overview).)

## The Old Good JavaScript Way

In the code below, we write the vanilla JavaScript in a `script` tag, which tells Astro to give this code block to the browser. It will work in a regular way.

```javascript
// src/components/Navbar.astro

<nav>
  <a class="active" href="/">Home</a>
  <a href="/portfolio">Portfolio</a>
  <a href="/posts">Article</a>
  <a href="/about">About Me</a>
  <a href="/contact">Contact Me</a>
</nav>

<script>
  const navLinks = document.querySelectorAll("nav a");

  navLinks.forEach((link) => {
    link.classList.remove("active");

    // `slice` here to remove the first `/` in pathname
    const currentPath = window.location.pathname.slice("1");

    // `link.href` returns a whole url, such as: "https://somedomain.com/posts" and we only need the last part
    const hrefArray = link.href.split("/");
    const thisPath = hrefArray[hrefArray.length - 1];

    if (currentPath === thisPath) {
      link.classList.add("active");
    }
  });
</script>
```

## The Astro Way

We take advantage of Astro's [Runtime API](https://docs.astro.build/en/reference/api-reference/#astrorequest) and get the pathname in Astro components' [component script](https://docs.astro.build/en/core-concepts/astro-components/#the-component-script).

```javascript
// src/components/Navbar.astro

---
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.slice(1); // remove the first "/"
---

<nav>
  <a class={currentPath === "" ? "active" : ""} href="/">Home</a>
  <a class={currentPath === "portfolio" ? "active" : ""} href="/portfolio">Portfolio</a>
  <a class={currentPath === "posts" ? "active" : ""} href="/posts">Article</a>
  <a class={currentPath === "about" ? "active" : ""} href="/about">About Me</a>
  <a class={currentPath === "contact" ? "active" : ""} href="/contact">Contact Me</a>
</nav>
```


Highligh navlink, nav items with active states for current page in Astro.

Highlight Nav Link for Current Page in Astro


When I wrote a server API with Next.js, I encountered this error: `Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client`.

## The Problem

This is the simplified version of my code:

```javascript
// /api/user/me

export default async function handler(req, res) {
  const { id } = req.params;

  // check whether there's this user in database
  const verified = checkIdWithDatabase(id);

  if (verified) {
    res.status(200).json({ authenticated: true });
  }

  res.status(200).json({ authenticated: false });
}
```

The problem in this code is: the code executes **TWO** `res.json(...)`, because there's no `return` after the user's id is verified and `true` the code executes the "scenario 1️", then it execute "scenario 2️", too. That's why the error says "Cannot ... after they are sent to the client", the "scenario 1️" is already send to the client.

## The Solution

**Solution 1**: only get one result from a condition by using `if ... else`:

```javascript
// other parts are omitted

if (verified) {
  res.status(200).json({ authenticated: true });
} else {
  res.status(200).json({ authenticated: false });
}
```

**Solution 2**: add `return` statement:

```javascript
// other parts are omitted

if (verified) {
  // 1️⃣
  return res.status(200).json({ authenticated: true });
}

res.status(200).json({ authenticated: false });

// ============== OR ================

if (verified) {
  // 2️⃣
  res.status(200).json({ authenticated: true });
  return;
}

res.status(200).json({ authenticated: false });
```

These solutions can be applied to Express.


Fix Next.js or Express headers re-send error.

I make websites.

Projects

The Clone Webs

React Apps

digiKIT

Chat App

Blog Posts

Why `styled()` Notation Doesn't Work

Full Bleed within A Constrained Wrapper

@next/mdx Or next-mdx-remote

Highlight Lines in Code Block with Prism.js and MDX

Highlight Nav Link for Current Page in Astro

Set Headers Error with Next.js or Express