
When building applications with Next.js, we typically think of our pages as being either static or dynamic. In this case, static pages are pages that don't require fresh data during request time, and dynamic pages are the opposite.

In reality though, our dynamic pages are likely made up of both static and dynamic components. With the introduction of Partial Prerendering (PPR) in Next.js's App Router, we can now render pages both statically and dynamically.

In this post, we'll explore why this matters. If you prefer a TLDR, there is one at the bottom!

### How do we do things right now?
In the web development world, pre-rendering strategies play a significant role in how our application performs and delivers content to users. In Next.js, we can typically bucket our prerendering strategies into two categories - Static and Dynamic Rendering. Let's delve into these techniques and understand their differences.

#### Static Rendering: The Prepared Host

Think of Static Rendering as being a well-prepared host. Before your guests arrive, you've already prepared the meals, set the table, and are ready to serve as soon as the doorbell rings. In this scenario, Next.js takes on the role of this host, preparing the pages at build time or in the background upon data revalidation. Once ready, these pages are cached and ready to be served from the Edge, ensuring that guests receive the meals as soon as they request it. This approach works best when you're dealing with data that's consistent across all users and can be prepared beforehand, like a blog post. 

You may have guessed though that with this approach, you won't be able to personalise content for the end user, since the page is generated during build time.

#### Dynamic Rendering: The Personal Chef

On the other hand, Dynamic Rendering is like having a personal chef ready to whip up a meal based on each guest's preferences as they arrive. In the digital realm, this translates to rendering pages at the time of each user request. This method caters to scenarios where data is personalised or can only be determined at the time of the request, such as user-specific dashboard or live scores on a sports page.

However, this approach suffers from the fact that  we render the page at runtime on each request. The user won't see anything until the computation has been completed on the server and a response is sent back to the client.

#### Sounds like we've got our bases covered though?
You might be thinking that this is all sounding pretty good and we can use either method depending on the situation. However, the caveat is that the decision between Static and Dynamic Rendering has to be made on the page level. This means that even if the page contains just 1 dynamic component while the rest of the page is static, the entire page has to be entirely dynamically rendered on each request, which will be slower and more expensive over the long run.

This rigidity can be limiting, since in many real-world applications, a page isn't entirely static or dynamic. Take an e-commerce page for example, which might display a mix of static product listings alongside dynamic, personalised recommendations.

With the release of PPR in Next.js 14, we can now gracefully handle this blend, allowing for pages that are mostly static but with dynamic segments where necessary. Now, part of your page can be prepared ahead of time, while the dynamic components can be rendered on the fly.

### What is PPR?
PPR allows us to move away from the rigid mental model of having to serve content dynamically or statically on the page level. With PPR, Next.js combines both static and dynamic pieces of content on the same page, where the static parts are rendered at build time while the dynamic parts can be rendered on each request.

In practice, this means that when a user hits the page, they'll immediately get served a 'static shell', so that they start seeing content straight away. The dynamic parts are then rendered in the background on the server, with static fallbacks served to the user as part of the initial static shell response.

![Desc:Sourced from https://www.youtube.com/watch?v=MTcPrTIBkpA](//images.ctfassets.net/fjnh1kuhre2f/51LN5vaQDhMPgC1HfXDIVk/0691eb138451df3bcb517b50ca915577/ppr-2.webp)

### How does it work?
PPR works by taking advantage of `React Suspense`. Suspense boundaries let you dictate which parts of your UI should appear together immediately, and which parts should be progressively revealed, with the ability to assign a static fallback whilst they’re being rendered on the server. So in the case of a mostly static page having one dynamic component, its dynamism can be prevented from affecting the rest of the page by wrapping it in a Suspense boundary, ensuring that the rest of the page is pre-rendered as a ‘static shell’ at build time.

![Desc:Sourced from https://www.youtube.com/watch?v=MTcPrTIBkpA](//images.ctfassets.net/fjnh1kuhre2f/4TrOPQLP5Bx7XUk8Iq8dFi/0219316448575c1ef99e3a3ebb937480/ppr-1.webp)

At first glance, the user will immediately get a fallback UI as part of the static shell. As soon as the dynamic component is ready though, it’ll be streamed into the UI .

### Can I start using this now?
Yes you can! __Although as a warning, I probably wouldn't recommend it for production at this stage.__

#### 1. Edit your `next.config.js` file
Simply add the following experimental flag to your `next.config.js` file

```tsx
experimental: {
    ppr: true,
}
```

#### 2. Wrap dynamic components in `Suspense`
When creating a page in Next.js, for each dynamic component on the page simply wrap the component in a `Suspense` boundary and specify a fallback. Here's some example code from Vercel's PPR demo, which you can check out [here](https://www.partialprerendering.com/).

```tsx {17-19, 23-25}
import { Suspense } from 'react';
import {
  RecommendedProducts,
  RecommendedProductsSkeleton,
} from '#/components/recommended-products';
import { Reviews, ReviewsSkeleton } from '#/components/reviews';
import { SingleProduct } from '#/components/single-product';
import { Ping } from '#/components/ping';

export default function Page() {
  return (
    <div className="space-y-8 lg:space-y-14">
      <SingleProduct />

      <Ping />

      <Suspense fallback={<RecommendedProductsSkeleton />}>
        <RecommendedProducts />
      </Suspense>

      <Ping />

      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </div>
  );
}
```

### And that's a wrap!
I hope after reading this you have a better understanding of PPR and what problem it's trying to solve. I'm really excited to see this being used in production apps when it's ready!

---

### TLDR
- __Dynamic Rendering__: With dynamic rendering, we render the page at runtime on each request. The computation all happens on the server and then a response is sent back to the client. The caveat here is that the user doesn’t see anything until the response is returned.
- __Static Rendering__: With static rendering, there is no computation at runtime because it’s already been done at build time, meaning we can serve the content quickly from a CDN where it’s been cached. However, we can't personalise any of the content on the page.
- __Partial Prerendering__: PPR takes advantages of both static rendering and dynamic rendering, allowing developers to pre-render parts of the page and serve those immediately, whilst doing computation on the server to serve the rest of the page. Cold starts are a thing of the past!

Partial Prerendering in Next.js 14

It's been a minute! I thought I'd share a short life update - I proposed to my long time girlfriend while we were in Kyoto, Japan!

This trip was an amazing experience, culminating in this one moment which I had planned for most of 2023. Such a surreal experience and beautiful day, in winter no less!

Here's a snap of the moment - truly unforgettable 🤩

![engagement-photo](//images.ctfassets.net/fjnh1kuhre2f/2zVWGqvKuCpehOvj7v70R0/7bf6aa0071a400cd65047571a3616feb/108.webp)

Engaged in Japan


I recently made the decision to switch my personal website from React to Next.js, driven in part by my upcoming role at Vercel and my desire to become more familiar with their framework.

As I delved into the Vercel docs, I came across the concept of Open Graph (OG) meta tags — in particular OG images. For those unfamiliar, an OG image is an image that accompanies a link when posted on social media.

They can have a big impact on increasing clicks and engagement — in fact, posts on LinkedIn that contain images tend to receive, on average, [98% more comments](https://business.linkedin.com/content/dam/business/marketing-solutions/global/en_US/site/subsites/content-marketing/img/V2/e3_Infographic_Draft_11_1200.pdf). Likewise, tweets that include visual content have been found to be [three times more likely](https://business.twitter.com/en/blog/7-tips-creating-engaging-content-every-day.html) to generate engagement compared to those without.

To make my blog posts more appealing, I wanted to make sure they all had accompanying OG images — who knows, maybe that's why you're reading this!

### Enter Next.js
Making OG images for a website used to be hard work that needed to be done by hand. It could take a lot of time to create and store the images, and the images might not look consistent across each post.

Upon discovering that Next.js supports OG image generation, I was stunned. That's right, each time you create a new blog post for example, the OG images will be generated automatically!

This is a game-changer for three reasons:

1.  No more manual image creation and storage headaches
2.  Consistent quality and style across all OG images and social media posts
3.  Optimal image display and appearance for each platform.

### So how does it work?
OG image generation is made possible with the help of the `@vercel/og` library and Vercel Edge Functions. For my site, whenever I create a new blog post, an OG image is generated automatically just like the one below.
![OG Image Generation](//images.ctfassets.net/fjnh1kuhre2f/3GLzO2miLx4IPkmFvfPbvd/54b277e326c14ff88a70e95a752849f6/og.png)

Let's see how we can create an OG image like mine in Next.js. It's important to keep in mind that this guide assumes a basic understanding of working with Next.js.

---

### 1. Install `@vercel/og`

To get started, run one of the following commands to install `@vercel/og` in your Next.js project:
```shell
npm i @vercel/og

# or

pnpm add @vercel/og

# or

yarn add @vercel/og
```

### 2. Setting up the API Endpoint
The next step is to create an API endpoint named `og.tsx` or `og.jsx` in the `pages/api` folder. In this endpoint we will define the appearance of our OG image.

Let's start with something simple and have the endpoint generate a `Hello World` image.

```tsx
import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'edge',
};

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 40,
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}
```

A couple of things worth mentioning in the code above:
1.  The image size of 1200 by 630 pixels follows Facebook's recommended size for OG images.
2.  The endpoint is set as an edge function, as explained in Vercel's [docs](https://vercel.com/docs/concepts/functions/edge-functions/quickstart#add-code-to-your-function). Edge Functions offer better performance and cost-effectiveness compared to Serverless Functions.
3.  The image is styled using React's inline style, but you can use [Tailwind](https://tailwindcss.com/) instead as follows:

```jsx
<div tw="p-10 w-full h-full flex items-center justify-center text-5xl text-center bg-white">
  Hello world!
</div>
```

It's now time to check out your OG image in action! Navigate to `http://localhost:3000/api/og` on your local dev environment, and you should see the following image:
![static-og-image](//images.ctfassets.net/fjnh1kuhre2f/47LBM9QYSXCydVmUyTYb5f/b3ce7a8db0fa12b0633f14cd8e470cc7/static-og-image.png)

To complete the setup, in your `pages/index.tsx` file replace the code with the following. Now, whenever you share this page as a link on social media, the image you just created will also appear as a preview.

```tsx
import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>Hello world</title>
        <meta
          property="og:image"
          content={`<YOUR_APP_URL>/api/og`}
        />
      </Head>
      <h1>Hello world!</h1>
    </>
  )
``` 

### 3. Customize Your Text 
In some cases you will want to show custom text in your OG image. An example could be for blog posts (like the one you're reading!). 

To achieve this, we'll need to pass `title` as a query parameter to our endpoint. We'll also add a `try...catch` in case our edge function throws an error when generating the image:

```tsx {3-4, 10}
export default async function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url);
    const title = searchParams.get("title") || "My default title";

    return new ImageResponse(
      (
        <div tw="p-6 h-full w-full flex justify-center items-center">
          <div tw="p-10 bg-zinc-900 h-full w-full flex flex-col">
            <div tw="mt-16 flex text-6xl leading-normal text-gray-200">{title}</div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e: any) {
    console.log(e.message);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}
```

As for the OG meta tags, you will probably want to move it from your home page to a dynamic page such as for a blog post. Once you've done this, you can edit the `<Head>` so that you can encode the title and pass it to the endpoint URL like this:

```tsx {5}
<Head>
  <title>{postTitle}</title>
  <meta
    property="og:image"
    content={`<YOUR_APP_URL>/api/og?title=${encodeURI(postTitle)}`}
  />
</Head>
```

When you visit `http://localhost:3000/api/og?title=My%20OG%20Image%20And%20Some%20Custom%20Text` locally, you should see the following image with the desired text:
![og-image-custom-text](//images.ctfassets.net/fjnh1kuhre2f/1Z1q6STw3larM300qa9jxi/8f431b10795d92f43bba69d0cc47fd1f/Screen_Shot_2023-02-09_at_5.22.03_pm.png)

You may have noticed that my OG image also includes some extra details such as a description and a date for when the post was published. I'm going to amend the endpoint to more closely match the style and info in my first OG image above.

```tsx {5-8,15-20}
export default async function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url);
    const title = searchParams.get("title") || "My default title";
    const description =
      searchParams.get("description") || "My default description";
    const publishDate =
      searchParams.get("publishDate") || new Date().toLocaleDateString();

    return new ImageResponse(
      (
        <div tw="p-6 h-full w-full flex justify-center items-center">
          <div tw="p-10 bg-zinc-900 h-full w-full flex flex-col">
            <div tw="mt-16 flex text-6xl leading-normal text-gray-200">{title}</div>
            <div tw="mt-5 flex text-3xl text-gray-300">{description}</div>
            <div tw="mt-5 flex items-center text-xl text-gray-300">
              <div>Your website</div>
              <div tw="-mt-2 ml-3">.</div>
              <div tw="ml-3">{publishDate}</div>
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e: any) {
    console.log(e.message);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}
```

As for the OG meta tags, we can update the code to:
```tsx {5}
<head>
  <title>{postTitle}</title>
  <meta
    property="og:image"
    content={`<YOUR_APP_URL>/api/og?title=${encodeURIComponent(title)}&publishDate=${encodeURIComponent(createdAt)}&description=${encodeURIComponent(description)}`}
  />
</head>
```

These changes should produce an OG image that includes a custom title, description, and publish date. Try visiting `http://localhost:3000/api/og?title=My%20OG%20Image%20And%20Some%20Custom%20Text&description=My%20custom%20description&publishDate=February%203%2C%202023` locally - you should see an image like the one below.
![dynamic-text-og-image](//images.ctfassets.net/fjnh1kuhre2f/7J4PeXmxCrCUOpioubxgMP/99f320cf2d8e719a4e554fe3d1c64629/Screen_Shot_2023-02-10_at_10.28.20_pm.png)

### 4. Custom fonts
In the OG image shown above, I am using the custom font `JosefinSans-Regular`. In my project, I've stored the font file in a folder named `assets` and I've updated the endpoint as follows:

```tsx {2-4,7,21,36-42}
// Make sure the font exists in the specified path:
const font = fetch(
  new URL("../../assets/JosefinSans-Regular.ttf", import.meta.url)
).then((res) => res.arrayBuffer());

export default async function handler(req: NextRequest) {
  const fontData = await font;
  try {
    const { searchParams } = new URL(req.url);
    const title = searchParams.get("title") || "My default title";
    const description =
      searchParams.get("description") || "My default description";
    const publishDate =
      searchParams.get("publishDate") || new Date().toLocaleDateString();

    return new ImageResponse(
      (
        <div tw="p-6 h-full w-full flex justify-center items-center">
          <div
            tw="p-10 bg-zinc-900 h-full w-full flex flex-col"
            style={{ fontFamily: "'JosefinSans-Regular'" }}
          >
            <div tw="mt-16 flex text-6xl leading-normal text-gray-200">{title}</div>
            <div tw="mt-5 flex text-3xl text-gray-300">{description}</div>
            <div tw="mt-5 flex items-center text-xl text-gray-300">
              <div>Your website</div>
              <div tw="-mt-2 ml-3">.</div>
              <div tw="ml-3">{publishDate}</div>
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: "JosefinSans-Regular",
            data: fontData,
            style: "normal",
          },
        ],
      }
    );
  } catch (e: any) {
    console.log(e.message);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}
```

Now, the OG image's font should match the one in your assets folder:
![og-image-custom-font](//images.ctfassets.net/fjnh1kuhre2f/6aGZHVJAFVcX3ibkrzBYQ1/33de636aa1a479a5c2d4b27de72ec909/Screen_Shot_2023-02-10_at_10.29.27_pm.png)

### 5. Incorporating an image
Sometimes, you may also want to include an external image as part of your OG image. For this example, I used my profile picture. To include an image in your OG image, add the following code just before the `div` element containing the `title`:

```tsx {8-15}
<div tw="p-6 h-full w-full flex justify-center items-center">
  <div
    tw="p-10 bg-zinc-900 h-full w-full flex flex-col"
    style={{ fontFamily: "'JosefinSans-Regular'" }}
  >
    // If the picture is stored in your public folder, you can simply
    // use <YOUR_APP_URL>/profile-pic.png for the src
    <div tw="mt-10 mb-3 flex items-center">
      <img
        width="84"
        height="84"
        src={`<LINK_TO_PROFILE_PIC>`}
        tw="border-2 border-white rounded-full"
      />
    </div>
    <div tw="mt-16 flex text-6xl leading-normal text-gray-200">{title}</div>
    <div tw="mt-5 flex text-3xl text-gray-300">{description}</div>
    <div tw="mt-5 flex items-center text-xl text-gray-300">
      <div>Your website</div>
      <div tw="-mt-2 ml-3">.</div>
      <div tw="ml-3">{publishDate}</div>
    </div>
  </div>
</div>
```

With these changes, your OG image should now look like this:
![og-image-profile-pic](//images.ctfassets.net/fjnh1kuhre2f/24N1Jo1cEoieT1Ve1Xau7a/ca7f15910bcce1b053aecc6da458b3ee/Screen_Shot_2023-02-10_at_10.31.26_pm.png)

### 6. Finishing touches
You may also recall that my OG image also has a nice gradient border that wraps around it. I'm still new to Tailwind, so if anyone knows how to do this in Tailwind please let me know!

To give your OG image a fancy border, modify the `jsx` code in your endpoint to the following:

```tsx {3-6}
<div
  tw="p-6 h-full w-full flex justify-center items-center"
  style={{
    background: "linear-gradient(133deg, rgb(6, 182, 212) 0%, rgb(59, 130, 246) 45%, rgb(168, 85, 247) 100%)",
    fontFamily: '"Josefin-Sans"',
  }}
>
  <div tw="rounded p-10 bg-zinc-900 h-full w-full flex flex-col">
    <div tw="mt-10 mb-3 flex items-center">
      <img
        width="84"
        height="84"
        src={`<LINK_TO_PROFILE_PIC>`}
        tw="border-2 border-white rounded-full"
      />
    </div>
    <div tw="mt-16 flex text-6xl leading-normal text-gray-200">{title}</div>
    <div tw="mt-5 flex text-3xl text-gray-300">{description}</div>
    <div tw="mt-5 flex items-center text-xl text-gray-300">
      <div>Your website</div>
      <div tw="-mt-2 ml-3">.</div>
      <div tw="ml-3">{publishDate}</div>
    </div>
  </div>
</div>
```

And voila! You should now end up with the something that looks a lot like the one I posted above!
![og-image-final](//images.ctfassets.net/fjnh1kuhre2f/5QdVLVekKAq0Im4paLkzde/c14e1600a126a4ba48419ffc27e357ad/Screen_Shot_2023-02-10_at_10.33.15_pm.png)

---

### That was pretty easy...
I'm hoping that by the end of this you'll find that generating eye-catching OG images in Next.js is actually pretty easy. No more manual labour, and no more worrying about inconsistent images!

I'm looking forward to seeing all the social media posts with fancy images attached to them 🤩. Good luck!

Open Graph Image Generation in Next.js

### Picture this.
You've been tasked with solving an interesting problem with the power of code. Overwhelmed with excitement, you immediately start punching away at your keyboard. You type whatever first comes to mind, not for one second losing focus on what you're doing. You're also probably thinking to yourself how your work is going to blow people's minds.

> Wait until they see what I've written. Their jaws are going to drop straight to the ground marvelling at this gift from god.

You finish your work, proudly handing it over to your colleagues. But after a few moments, all you get are puzzled looks and people scratching their heads.

### What went wrong?
When I first started out, I often found myself in situations similar to the one above. After being given a task my first instinct would be to code the first solution that came to mind. However, I never gave any thought to whether anyone would be able to understand what I had done.

Over time, I've learned to write code that clearly communicates to my team what my work is trying to achieve and how it is achieving it. Here are the three most important things that have helped me become a better programmer.

### 1. Break down the problem
> "If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and five minutes thinking about solutions."
> 
> — Albert Einstein (maybe)

Whether Albert Einstein actually said that is an argument for another day, but I think the idea behind the quote itself is still important. How long you spend breaking down a problem is just as important as the execution.

Before writing any code, I begin by understanding what the problem actually is. This might involve asking relevant questions, writing down key ideas, or speaking with my team mates. Doing this helps me account for two very important things - unforeseen edge cases and ways in which the problem may evolve in the future.

Taking a step back to think about the problem and ask for further details does a world of wonders as it could highlight key ideas you may not have initially thought of.

### 2. Write code expecting a toddler to read it
> "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
> 
> — Martin Fowler

Many programmers are eager to impress others by writing overly complicated code. From personal experience however, the urge to write code in this way tends to come back and bite you in the rear.

In the past, I wrote code in this way because of my eagerness to go with the first solution that I came up with. It was easy, fun, and required the least amount of energy. Unfortunately, it wasn't the best approach for writing readable code. I've found that thinking through my solution and iterating on it helps with code readability and maintainability.

By being more mindful of how your code is laid out, you and your colleagues will be able to come back and make necessary changes more easily should the occasion arise.

### 3. Ask questions like a toddler
> "There are naive questions, tedious questions, ill-phrased questions, questions put after inadequate self-criticism. But every question is a cry to understand the world. There is no such thing as a dumb question"
> 
> — Carl Sagan

Two studies conducted at the [University of Michigan](https://www.sciencedaily.com/releases/2009/11/091113083254.htm) looked into why children ask their parents so many questions - including the reason why they keep asking "why". The researchers concluded that children use the process of questioning to actively learn about the world around them.

In the past when I was confused about something, instead of simply asking for help I would spend most of the time pondering about the thing I was confused about. In truth, it didn't do me any good - I'd pretty much have to Google the answer anyway. Although some may argue that doing this shows my resourcefulness, I've found that you're able to probe further when asking a question in person. You're able to keep asking "why".

Much like children, we should always be digging into the "why" of things. Constantly asking "why"enables us to gain a deeper understanding on a subject matter. Talking with your team mates also has added benefits. It helps us gain a different perspective on things, and strengthens the trust you have with each other.

---

### n brains are better than 1
These habits have helped me become a better programmer because they encourage me to be a team player. Actively communicating with your peers and building solutions together will help you grow more rapidly as a developer as it gives you exposure to all sorts of perspectives and ideas. Also, working with others is always more fun than working by yourself 😃.
Keep coding smarter, not harder 🙌.

Three things that made me a better programmer

You’ve probably heard the terms Machine Learning, Big Data, Virtual Reality and Internet of Things tossed around. You’ve also probably heard how these innovative technologies are driving us towards the future and how developers are changing the world.

And you know what? They’re right. Well… mostly.

It’s natural to feel like you’re getting left behind. Here are some questions you’ve probably asked yourself when considering whether you should learn to code or not.

1. What do any of these things mean?
2. How do people even get started learning this stuff?
3. Am I good enough to try it?

These were questions I asked myself before I became a developer. I was lucky enough to get an opportunity to learn by working for a good boss. After some months of playing around with Javascript, HTML, CSS, and SQL, I was soon developing apps that would go on to improve the lives of our users.

### If you’re a developer, why are you saying I shouldn’t learn to code?
Although being able to code was — and is — an important skill for myself and many others in the technology industry, I believe that it is only a necessary skill in the right situation. That situation in most cases is when you are trying to come up with a solution to an existing problem.

But Richard, that’s not really true is it? How do these amazing programmers come up with awesome ideas for startups and bring them to life through the sheer power of their fingers?

Yes you’re right — I was just exaggerating to get my point across. In most cases, developers are usually constructing solutions to solve problems they’ve been given.

The other half of the equation is actually understanding what the problem is. In fact, amazing programmers who come up with these groundbreaking startups are doing both — they’re solving an important problem for their customer segments and then building it.

So in essence…

> You need to understand the problem before coming up with a solution.

It may sound obvious when I put it this way, but many teams and companies suffer from not fully understanding this concept. Before figuring out what their users actually need, many managers and stakeholders throw money at developers to build solutions that aren’t beneficial.

This leaves a huge opportunity for people who are able to clearly understand and articulate the problem space of which they’re working in.

### So then should I learn to code?
If you get a rush from solving problems, and enjoy working through difficult problems, then coding is for you. You need to have a knack for being resourceful, paying careful attention to details and being persistent when confronted with difficult problems.

If however you’re more into speaking with customers, learning about their processes and needs, and figuring out how your service or product can fit into their lives, you’re probably better off focusing on the business side of things. Roles like product management, product design, marketing and sales are all about figuring out customer pain points.

I encourage you to explore learning resources around programming to decide for yourself whether it’s your cup of tea. As you progress through the different resources, keep these points in mind. You will learn very quickly whether you’re interested in coding at all.

Don’t be pressured to learn to code

![Quarter Life Crisis](//images.ctfassets.net/fjnh1kuhre2f/7ipQcKcVLrZJwkSjUDJnpd/96baf19838cfaf6eab5edd408cb2332d/3ccg75.jpg)

For many of us, turning 25 is a big deal. I never thought I'd be one to get so caught up about a certain age but thoughts of uncertainty about the future kept popping into my head when I hit the age myself. I could only describe this as my Quarter Life Crisis unfolding before my eyes. Thankfully, I've had the past few weeks to chill out and collect my thoughts on the matter. Here's what I think.

### I don't know what I'm doing
As a student, the path ahead was fairly straightforward. One would go to high school, graduate university, and then get a job. But after university life isn't as straightforward as we would have hoped. There isn't someone there to hold your hand and tell you what you should be doing.

Naturally this is a very scary prospect for many people. You've got no idea what you actually enjoy doing, with an overwhelming amount of options available to you. You may even be studying a degree or working in a job you currently despise, only continuing it as it's the *safe* option.

### So what should I do?
Unfortunately, I don't have an answer for you as it really depends on your situation. There is no formula out there that works for everyone. What I can do though is tell you my own story which will hopefully inform you of things to look out for. 

### My story
In 2017, I was stripped for cash and desperately needed a job to help pay the bills. I sent out my resume to a few EduTech organisations hoping one would stick. Eventually, I landed a role as a lead generator for a startup based in Sydney. Although not the role I initially applied for, the COO (let's call him David) insisted that I join the team. Being a young university student with ambitious goals, I was keen to expand my skillset in an area I thought I would never venture into.

For me, the greatest thing I got out of this role was the mentorship I received from David. He was not only appreciative of the sales I was bringing the company, but was also invested in helping me grow. I informed him that sales was not what I really wanted to be in, even though I was pretty good at it. He must have remembered that as he would eventually offer me work that would set the course for my future career.

One day, he brought up the idea of utilising data to improve our sales processes and decisions. He asked me to look into some data sets that had recently been made available company wide and see if we could use any of it. At first I was doing simple SQL queries to query data he found useful. It wasn't long before I started staying back late in the office to come up with my own useful data reports for David. The sense of autonomy I was given gave me a new found sense of purpose.

I soon realised that I had a knack for this coding thing and it wasn't long before I was building web applications and new product offerings for our customers. Eventually David helped me pivot into an engineering role at the company, which I am now thriving in.

### Okay but how does that help me?
For me, I received my lucky break because I was willing to try different things. In doing so, I figured out what it is I actually enjoy doing. Furthermore, I was fortunate enough to have someone mentor me when it came to my career aspirations.

So, my advice would be to try different things and find a mentor. These two things changed my life for the better.

### Can I do it?
You really can, but not without action and persistence! In the wise words of Arnold Schwarzenegger:

> *The mind is the limit. As long as the mind can envision the fact that you can do something, you can do it, as long as you really believe 100 percent.*

Go out there get what you're worth my fellow 25 year old.


Hey! I'm Richard

Recent Posts

Partial Prerendering in Next.js 14

Engaged in Japan

Open Graph Image Generation in Next.js

Three things that made me a better programmer

Work

Vercel

RangeMe

Mathspace