DEV Community: Martin Ratinaud

Send from your business email address

Martin Ratinaud — Thu, 20 Mar 2025 04:47:05 +0000

Ok so now that we have a ready startup business email address, it's time to be able to send email from it.

This is the link you can send to your coworkers who need to setup their business email address

Configure Google App Passwords

Go to App Password in your Google Account > Security
Create a new app password called Cloudflare (or anything you want)
Note the password provided to you (something like tksd padv shty ojiz)

Configure Gmail

Go to Gmail Settings > Accounts and imports > Send mail as > Add another email address
Enter the email address created on Cloudflare (martin@headlinker.com for instance) and uncheck "Treat as an alias"
Then use smtp.gmail.com, youraddress+headlinker@gmail.com and the password you got before tksd padv shty ojiz
Click on the email you just received

And VOILA! (as we say in french)

PRO Tips

Filtering

As you may have noticed, I have used the + tweak of gmail in order to be able to categorize the email received. I often do that as it will help me automatically filter and organize my inbox. This way, I can easily set up rules to label, archive, or prioritize emails based on the specific address used. Let me know if you need me to use a different email format!

Redirection alias

There is one missing thing though when using Cloudflare + Gmail and it's the redirection aliases.
For instance, I want to redirect hello@headlinker.com to martin@... and dorothee@... but it's not possible yet.
So I created a custom filter in Gmail which does the forwarding for me

Unlimited free business email addresses for your startup

Martin Ratinaud — Thu, 20 Mar 2025 04:45:39 +0000

This is something I've been wanting for years and that I found very difficult to get. I mean, without paying per email address of course :-)

First, for my projects Headlinker, Staking Crypto and Baste Sportive I was using Zoho: one email, another inbox, no redirection. I found that very annoying and in order to make it simpler for me, I wanted to be able to receive, classify and reply from within my gmail account.

After extensive research, I find the perfect way using Cloudflare.

Let me tell you how to do so

Setup Business email address

Enable email handling in Cloudflare

First of all, you need to have your DNS handled by Cloudflare. If you're reluctant about that here are all the benefits I see:

Performance Boost – Cloudflare’s globally distributed network ensures faster DNS resolution, reducing latency for your users.
Security Enhancements – It protects against DDoS attacks, domain hijacking, and other threats with built-in security measures.
Easy DNS Management – Cloudflare offers a user-friendly dashboard with quick propagation times for DNS changes.
Easy import - migration process will copy all your DNS data and you will only have to change the name servers in your original domain name provider
and many more

Once done

Create email address

Enable Email Routing
Create a custom address and select "Send to an email"
Click on the email you received

VOILA, you will now receive all emails to this address into your inbox.

Create as many addresses as you need

Repeat the process for all email addresses you want to have and be able to send emails from: info, support, hello etc...

For others you can configure the Catch-all address to redirect to one of your emails (I redirected it to hello@headlinker.com which was previously created)

Send email from your business email address

Now let's configure how you can configure your inbox to be able to send from this email address.

Centering flex items with overflow

Martin Ratinaud — Thu, 02 Nov 2023 04:59:55 +0000

Have you ever tried scrolling horizontally a list of flex items that are justify-center and end up with the first item not shown or partially hidden.

Well, it just happened to me while working on staking crypto.

Well this is very annoying, but fortunately enough, here is the solution to this problem in 3 simple steps.

For Tailwind

Remove justify-center from the parent element
Apply ml-auto to the first element
Apply mr-auto to the last element

Tailwind having great utility classes, this can just be done in one step

Replace justify-center by [&>*:first-child]:ml-auto [&>*:last-child]:mr-auto

Here is a Playground

For CSS

Remove justify-content:center from the parent element
Apply margin-left: auto to the first element
Apply margin-right: auto to the last element

Who am I?

My name is Martin Ratinaud and I’m a freelance senior software engineer and remote enthusiast, contagiously happy and curious.
I create websites like this one for staking crypto and many more...

Also, I'm always looking for new challenges or MVP to create. Hire me !

Retrieve vanity url and headline from LinkedIn with NextAuth (using r_basicprofile)

Martin Ratinaud — Mon, 23 Oct 2023 07:48:11 +0000

Hi all

For Headlinker the community for indie recruiters i'm building right now, I set up a LinkedIn login capability, as all of my users do have LinkedIn.

It's very easy to setup to get the email, name and profile image but not quite easy to get the vanity url and headline.

So here is how to do it!

Prerequisites

You have NextAuth already setup in your app with basic LinkedIn.

Permissions

By default, when asking for login permissions on LinkedIn, you get r_liteprofile and r_emailaddress which gives you basically first name, last name, image and email.

We need to get access to r_basicprofile to get back the vanity URL and the headline.

For this

Go to your LinkedIn Developer apps page
Select you app
Go to Products
Ask for permissions on the Advertising API (Yes it's weird but it's in there)

Answer the questions and be as specific as possible on why you need access to these informations
Wait

It can take several hours to get access or you can even get refused.
If you manage though, you can go to next step.

Configure Next-Auth

No that you have access to those new fields, you need to update next-auth to actually retrieve those fields and save them in your database.

For this, you will need to replace

LinkedInProvider({
  clientId: process.env.AUTH_LINKEDIN_CLIENT_ID as string,
  clientSecret: process.env.AUTH_LINKEDIN_CLIENT_SECRET as string,
}),

{
  ...LinkedInProvider({
    clientId: process.env.AUTH_LINKEDIN_CLIENT_ID as string,
    clientSecret: process.env.AUTH_LINKEDIN_CLIENT_SECRET as string,
  }),
  authorization: {
    url: 'https://www.linkedin.com/oauth/v2/authorization',
    params: { scope: 'r_liteprofile r_basicprofile r_emailaddress' },
  },
  userinfo: {
    url: 'https://api.linkedin.com/v2/me',
    params: {
      projection: `(id,localizedFirstName,localizedLastName,vanityName,localizedHeadline,profilePicture(displayImage~digitalmediaAsset:playableStreams))`,
    },
  },
  async profile(profile, tokens) {
    const emailResponse = await fetch('https://api.linkedin.com/v2/emailAddress?q=members&projection=(elements*(handle~))', {
      headers: { Authorization: `Bearer ${tokens.access_token}` },
    });
    const emailData = await emailResponse.json();
    return {
      id: profile.id,
      url: `https://www.linkedin.com/in/${profile.vanityName}`,
      name: `${profile.localizedFirstName} ${profile.localizedLastName}`,
      email: emailData?.elements?.[0]?.['handle~']?.emailAddress,
      title: profile.localizedHeadline,
      image: profile.profilePicture?.['displayImage~']?.elements?.[0]?.identifiers?.[0]?.identifier,
    };
  },
  allowDangerousEmailAccountLinking: true,

Let's break this down

First, change the scope and add r_basicprofile, this will give access to the corresponding fields
Then, change the projection in userinfo so that it includes the vanityName (martinratinaud) which we will use to build the vanity URL and the localizedHeadline
Finally, map the profile to where you want to store it in your database -> for me, url and title
Optionally, set allowDangerousEmailAccountLinking if you already have LinkedIn account in the database. If it's the case and you don't do it, users will get an error as they can't signin with different permissions. See https://next-auth.js.org/configuration/providers/oauth#allowdangerousemailaccountlinking-option regarding this matter.

Bonus

In order to find all the fields available you just need to empty userinfo.params.projection and console.log in async profile function.

Prisma "null or does not exists"

Martin Ratinaud — Mon, 28 Aug 2023 13:04:27 +0000

I've been using Prisma on my latest project Karaoke Tools and as crazy as it may seem, I did not find any easy way (like a plugin) to handle soft delete behaviour.

So I had to tweak it myself manually and ending up in a case where

deletedAt can be null
deletedAt can NOT exist

This is because I'm using mongo and no default value for deletedAt.

This filtering in Prisma is not handled by default (like deletedAt: null so I had to do it with an OR request.


const items = await prisma.event.findMany({
    ...
    where: filters: {
      OR: [{ deletedAt: { isSet: false } }, { deletedAt: null }],
    ...
  });

As it took me almost an hour to find this (chatGPT not being helpful), I wrote this article.

Cheers

Use Next.js component in posts with Markdown

Martin Ratinaud — Fri, 09 Jun 2023 05:28:16 +0000

For stakingcrypto.io I'm trying to store all content that is meant for blog, coin and exchange details in markdown components because I find it really easier to add and update data quickly.

A pain has always been to be able to insert <Image> and <Link> nextjs components as I always ending up with markdown files like this

As you can see, it does not look like markdown anymore and thus I can't ask not technical people to fill them up for me ☹️.

That's when I stumbled on this excellent post of Sebastien Castiel which fixed the <Image> problem in a very neat way. And I ended up with this:

A lot better 😀, and I thus realized it would be very easy to replace those ugly links (<Link>) in the same way with one easy trick!

         <article className="prose lg:prose-xl">
            {mdxContent && (
              <MDXRemote
                components={{
                  ...components,
                  a: ({ href, children }: any) => {
                    if (href.startsWith('/')) {
                      return (
                        <Link href={href}>
                          <a>{children}</a>
                        </Link>
                      );
                    }
                    return (
                      <a href={href} target="_blank" rel="noreferrer">
                        {children}
                      </a>
                    );
                  },
                }}
                {...mdxContent}
              />
            )}
          </article>

With this

for an internal link, [Stake Ethereum](/stake/ETH/ethereum)
for a _blank page, [Stake Ethereum](https://stakingcrypto.io/stake/ETH/ethereum)

So easy to write and a lot neater

I now can also then add some nice CSS tweaks to add a small icon next to those external links.

Splendid! 🤩

Thanks for reading and follow me on Twitter for more

Internationalize NextJs URLs with next-translate (Part 2)

Martin Ratinaud — Fri, 17 Mar 2023 14:10:55 +0000

Now that it's finally possible to translate URLs with NextJs

What would be really awesome would be to add directly permalinks within the javascript page.

Something like

import { LanguageSwitcher, useTranslation } from 'modules/I18n';


+ export const permalinks = {
+  en: '/',
+  fr: '/accueil',
+ };

const HomePage = () => {
  const { t } = useTranslation();

  return (
    <section>
      <LanguageSwitcher />
      <br />
      <br />
      <div>{t('common:variable-example', { count: 42 })}</div>
    </section>
  );
};

export default HomePage;

Ok, let's do this then

TLDR

Repository with all source code can be found on GitHub (branch urls_in_page_const)

Prerequisites

Follow the part 1

What will be done

Instead of having all permalinks stored in a permalinks.json file, simply remove this file and export a constant directly from the page itself.

It will be a lot clearer for developers and is the approach commonly used in static blogs sites (usually a permalinks entry in a frontmatter variable)

Procedure

Idea here is to loop over all page files and extract the corresponding permalinks.

TLDR: See commit on GitHub

Add some utils

For listing all pages and read the exported const, let's use the fact that all pages are listed in the pages folder.

Simply deep scan them and read their content.

Here, I used a very "not perfect" hack that does the job.

As the codebase is in typescript but next.config.js is a js file, it is not possible to simply import the files and read the permalinks object.
I thus used ChatGPT to come up with the perfect regexp to do so 🤩.
When NextJS will support next.config.ts, this can be easily improved but it does the work for now.

Create a modules/I18n/utils/index.js file which will extract the permalinks from the pages:

const fs = require('fs');
const path = require('path');

const listFilesRecursively = (dir) => {
  const filesAndFolders = fs.readdirSync(dir, { withFileTypes: true });

  return filesAndFolders.flatMap((entry) => {
    const entryPath = path.join(dir, entry.name);

    if (entry.isDirectory()) {
      return listFilesRecursively(entryPath);
    }

    return entryPath;
  });
};

const parseJavascriptJson = (jsonString) => {
  const validJsonString = jsonString
    .replace(/(\s*[\{\},]\s*)(\w+)(\s*):/g, '$1"$2"$3:') // Add quotes around keys
    .replace(/'/g, '"') // Replace single quotes with double quotes
    .replace(/,\s*}/g, '}'); // Remove trailing commas

  try {
    const jsonObj = JSON.parse(validJsonString);
    return jsonObj;
  } catch (error) {
    console.error('Error parsing JSON:', error);
  }
};

const getPagePermalinks = () => {
  const pagePermalinks = {};
  const containingFolder = ['src', 'pages'];

  const filenames = listFilesRecursively(
    path.join(process.cwd(), ...containingFolder)
  );

  filenames.forEach((filepath) => {
    const content = fs.readFileSync(filepath).toString();

    // Read the file and extract the permalinks object
    // This could be done with a require, but it would not work with typescript
    // files
    // This is definitely a quick working hack 😎
    const match = /(?<=const permalinks[^=]*= )\{[\s\S]*?\};/gm.exec(content);
    const jsonString = match && match[0].replace(';', '');

    if (jsonString) {
      const relativeFilePath = filepath.replace(
        path.join(process.cwd(), ...containingFolder),
        ''
      );

      const parsedUri = path.parse(relativeFilePath);
      const uri = `${parsedUri.dir}${
        parsedUri.name === 'index' ? '' : parsedUri.name
      }`;
      // Depending on the eslint rules, javascript object may not be straightly convertible in JSON, so parse it
      const routes = parseJavascriptJson(jsonString);

      pagePermalinks[uri] = routes;
    }
  });

  return pagePermalinks;
};

module.exports = { getPagePermalinks };

Then, use this function instead of the permalinks.json file in next.config.js

- const permalinks = require('./permalinks.json');
+ const { getPagePermalinks } = require('./utils');

+ const permalinks = getPagePermalinks();

Finally, remove the permalinks.json file and add the export to the pages/index.tsx page

import { LanguageSwitcher, useTranslation, Link } from 'modules/I18n';

+ export const permalinks: { [key: string]: string } = {
+   en: '/',
+   fr: '/accueil',
+ };

const HomePage = () => {
...

🎉 Voila! (again)

You can now enjoy handling permalinks directly from your pages components and I find it awesome.

What about you?

Who am I?

My name is Martin Ratinaud and I’m a senior software engineer and remote enthusiast, contagiously happy and curious.
I create websites like this one for staking crypto and many more...

Check my LinkedIn and get in touch!

Also, I'm looking for a remote job. Hire me !

Internationalize NextJs URLs with next-translate (Part 1)

Martin Ratinaud — Fri, 17 Mar 2023 12:19:04 +0000

I18n URLs have been available in all major static sites generator but is somehow lacking in NextJs and this is definitely a pity 😔.

I'm french and always create my websites in at least french and english.

Here is a detailed explanation on how any developer can achieve this in less than 10 min and finally be able to handle urls such as

/
/fr/accueil

TLDR

Repository with all source code can be found on GitHub

Prerequisites

This tutorial is using the excellent next-translate library but can be adapted for next-i18next.

having next-translate already setup in your project

What will be done

Generate rewrites rules that will make the URLs adapt accordingly to the language selected by the user
Supercharge the nextTranslate function to use those rewrites
Write a custom Link component that will use those rewrites to generate corresponding i18n slugs and use them for navigation

Procedure

In all the following steps, files and functions created will be put in a modules/I18n folder.
This is a practice I came up with after many years of programming and that helps a lot for separating parts of applications (In this case, all I18n related logic).
I will soon write a blog post about it.

Specify permalinks

First thing to be done is to specify the permalinks we want to use.
Let's create a modules/I18n/permalinks.json

{
  "/": {
    "fr": "/accueil"
  }
}

NOTE: this is not an ideal solution for me as it separates the actual page (the jsx file) from the definition of its permalinks and it would be better to have an export const permalinks from within the page. This problem ias addressed in the part 2 of this article (and you can contact me also if you want more info).

Supercharge `nextTranslate` function

The goal here is to transform the permalinks we created into rewrite rules so that NextJS can rewrite correctly the URL depending on the language.

TLDR See commit on GitHub

Create a modules/I18n/next.config.js with

const nextTranslate = require('next-translate-plugin');
const fs = require('fs');
const permalinks = require('./permalinks.json');

/**
 * 
 * Transforms
{
  "/": {
    "fr": "/accueil"
  }
}
 * into
[
  {
    source: '/fr/accueil',
    destination: '/fr',
    locale: false
  }
]
*/
const permalinksToRewriteRules = (permalinks) =>
  Object.entries(permalinks).reduce(
    (acc, [originalSlug, permalinks]) => [
      ...acc,
      ...Object.entries(permalinks).reduce(
        (acc2, [locale, i18nSlug]) => [
          ...acc2,
          {
            source: `/${locale}${i18nSlug}`,
            destination: `/${locale}${originalSlug}`,
            locale: false,
          },
        ],
        []
      ),
    ],
    []
  );

module.exports = (nextConfig) => {
  const nextTranslateConfig = nextTranslate(nextConfig);

  return {
    ...nextTranslateConfig,
    async rewrites() {
      const existingRewrites = nextTranslateConfig.rewrites
        ? await nextTranslateConfig.rewrites()
        : [];
      return [...permalinksToRewriteRules(permalinks), ...existingRewrites];
    },
  };
};

and replace the call to the function in next.config.js

- const nextTranslate = require('next-translate-plugin')
+ const nextTranslate = require('./src/modules/I18n/next.config');

Awesome, now, if you reload your server, you will be able to access

http://localhost:3000/fr/accueil

Now, let's adapt the Link component to take this new URL into account

Adapt Link component

Goal is to be able to navigate directly to the nice URLs defined earlier.

TLDR: See commit on GitHub

A new modules/I18n component called Link has to be created and all imports of next/link has to be modified.

Yes, that's really a pain point, I admit but i could not find a way to do other wise.

This is in fact not a big problem as a simple "search and replace" will work

- import Link from 'next/link';
+ import { Link } from 'modules/I18n';

First, the permalinks variable has to be exposed to the frontend in order to be used by the Link component that will be created.

In nextJs, this is done with

  return {
    ...nextTranslateConfig,
+    publicRuntimeConfig: {
+      ...nextTranslateConfig.publicRuntimeConfig,
+      permalinks, // add it to publicRuntimeConfig so it can be used by the Link component
+    },
    async rewrites() {
    ...

How the nextJS built in Link component works is it will build up the URL from the href and the passed (or existing) locale.

This means a link to / in fr will lead to /fr

This component will create a map of URLs to route directly to the corresponding correct URL /fr/accueil

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();
const permalinks: { [key: string]: { [key: string]: string } } =
  publicRuntimeConfig.permalinks || {};

/**
 * Formats permalinks
{
  "/": {
    "fr": "/accueil"
  }
}
 * into
{
  "/fr/": "/fr/accueil",
  "/en/accueil": "/"
} 
 */
export const i18nFallbackUrls: { [key: string]: string } = Object.entries(
  permalinks
).reduce(
  (acc, [originalSlug, permalinks]) => ({
    ...acc,
    ...Object.entries(permalinks || {}).reduce(
      (acc2, [locale, permalink]) => ({
        ...acc2,
        [`/${locale}${originalSlug}`]: `/${locale}${permalink}`,
        [`/en${permalink}`]: originalSlug,
      }),
      {}
    ),
  }),
  {}
);

const I18nLink = ({ href, locale, ...props }: any) => {
  const router = useRouter();
  const wantedLocale = locale || router.locale;
  let i18nProps: any = {
    href,
    locale,
  };

  if (i18nFallbackUrls[`/${wantedLocale}${href}`]) {
    i18nProps = {
      href: i18nFallbackUrls[`/${wantedLocale}${href}`],
      locale: false,
    };
  }

  return <Link {...i18nProps} {...props} />;
};

export default I18nLink;

And voila!. It's all done and here is how it looks like

Reference

Check out the Github Repo

Who am I?

My name is Martin Ratinaud and I’m a senior software engineer and remote enthusiast, contagiously happy and curious.
I create websites like this one for staking crypto and many more...

Check my LinkedIn and get in touch!

Also, I'm looking for a remote job. Hire me !

Fetch several branches locally in GitHub actions

Martin Ratinaud — Thu, 27 Oct 2022 11:39:51 +0000

Edited

Working on Open Terms Archive, I recently needed to fetch both the main branch and my current branch locally in order to make a programmatic git diff on a file.

Unfortunately, GitHub Actions only allows the local fetch of one branch at a time, and even though such a syntax:

- uses: actions/checkout@v2
  with:
    fetch-depth: 0 # fetch all history for all branches and tags
  fetchLocal: ["main"]

would have been great, it does not exist.

NOTE: fetch-depth: 0 will fetch all the branches and will make them available on remotes/origin/<branch> but my script used the local branch main so I had to map it locally

So here is how fetching 2 branches locally can be done:

Solution

Thanks to Matti

- uses: actions/checkout@v2
  with:
    fetch-depth: 0 # fetch all history for all branches and tags
- run: git branch main remotes/origin/main

Other workaround

I keep it here as it shows how to retrieve the current branch name on both push and pull_request events (which I did not see anywhere).
But you should definitely use the above solution

- name: Get branch name
  run: |
    if [ -z $GITHUB_HEAD_REF ]; then BRANCH=$GITHUB_REF_NAME; else BRANCH=$GITHUB_HEAD_REF; fi
    echo "BRANCH=$BRANCH" >> $GITHUB_ENV
- uses: actions/checkout@v2
  with:
    ref: main
    fetch-depth: 0 # fetch all history for all branches and tags
- run: git checkout --force -B $BRANCH refs/remotes/origin/$BRANCH

Conclusion

This way, both branches are available locally for the diff.

Who am I?

My name is Martin Ratinaud and I’m a senior software engineer and remote enthusiast, contagiously happy and curious.
I create websites like this one for staking crypto and many more...

Check my LinkedIn and get in touch!

Recreate mysql database from frm files and idb

Martin Ratinaud — Fri, 22 Jul 2022 12:20:00 +0000

Recently, I made a huge mistake on my server and ended up with a failed install and no backups.
I basically had plesk with several wordpress sites and by chance, I still had access to my data, even though it was not useable anymore.

So here is how I did to recover my files and be able to get back a .sql file with structure and data.

First, retrieve data

So all my mysql data is lying on my server in /var/lib/mysql and it's organized in

ibdata1 (one important file to keep)
one folder per database name
inside each of this folder, .frm and .idb files

So let's rappatriate everything on my computer using scp

mkdir mysql
scp -r root@<ip>:/var/lib/mysql/* .

Then, retrieve mysql version

In order to be able to recreate the databases, we need to use the same version of mysql/mariadb

For this, launch cat /var/lib/mysql/mysql_upgrade_info on the server.

I got something like 10.1.48-MariaDB.

Launch mysql/mariadb on local

As we know the exact version we need, we will now use docker to launch a mysql server of exactly this version.
So on your local, run:

docker pull mariadb:10.1.48
docker run -p 127.0.0.1:3307:3306 --name mariadbtest -e MYSQL_ROOT_PASSWORD=Password123! -d mariadb:10.1.48

For this, we launch docker on port 3307 just in case another mysql server is already running.

Now, we can login to the database by using our favorite mySQL explorer, for me, it's Sequel Pro

You can connect to the database using

Host: 127.0.0.1
username: root
password: Password123!
port: 3307

🎉 you got now the same version of mysql you used to have on your server.

Copy your old databases to the docker machine

So now, let's move each database inside docker to be able to access it:

docker cp dbname/ mariadbtest:/var/lib/mysql

dbname begin the folder holding the .frm and .idb files.

From there, if you refresh your databases in Sequel Pro, you should see your database but an error occurs when you try to open any table.

Table 'dbname.mod844_icl_string_status' doesn't exist for example

Fix errors

In order to fix this, you need to copy the previous file we backed up:

docker cp ibdata1 mariadbtest:/var/lib/mysql

After that, restart your docker machine and you should be able to access your data using Sequel Pro.

Export your data

Now you can safely export your data into a .sql file and think about always setting up a backup system from now on!

Cheers

My name is Martin Ratinaud and I am a full stack developer

I run a staking crypto comparator to help you find the best rates for any crypto.

And as a remote worker since 2016, I also want you to discover your sweet spot based on your hobbies, so that you can expatriate and live your best life.

Generate dynamic social images the easy way

Martin Ratinaud — Fri, 22 Jul 2022 05:26:00 +0000

At staking crypto, we are aiming at comparing the best exchanges for getting the best possible rate on the market for your favorite crypto.

For this, if you follow our twitter, you will always be alerted as soon as a rate increases, or a new coin to stake is discovered.

I'm always sharing a direct link to the coin detail page such as staking FTM but the social image was only the logo of the crypto, in 64x64, which was not really appealing.

Fordtunately I discovered This Github repo and forked it to create my own social images, generated on the fly everytime I share a link of my website.

I still remember when I had to use imagemagick to do that and can't believe how easy it is now... As easy as creating an HTML page!

So here is how it looks like now !
A lot better right!

Cheers

NextJs on vercel - missing files after build when interpolating file names

Martin Ratinaud — Fri, 22 Jul 2022 05:15:27 +0000

While working on my free comparator for staking crypto - the perfect tool to find the best exchange to stake or lend your cryptos and earn the best rewards - I came across a difficult problem to understand.

Setup

Site is in Next / typescript
It is deployed on Vercel
It loads mdx through next-mdx-remote in getStaticProps

Build

Build works fine and resulting static files contains the content of an mdx file I'm loading in the page.

But after revalidation, content is not there anymore.

ERROR: Could not find /var/task/content/static/en/home.mdx

Weirdly enough, the content folder exists during the build, thus creating correctly the static files

But after deploy, this content folder was not here anymore, thus revalidating page with empty content

Reason

This is because nextjs uses @vercel/nft to determine exactly which files (including node_modules) are necessary for the application runtime.

So when you're using

const folder = "toto"
fs.readFileSync(path.join(process.cwd(), folder))

this library can not guess what it should include in the build and thus do not include the files

Solution

You need to specify exactly the path of the file to be included, and not a variable containing that path.

fs.readFileSync(path.join(process.cwd(),'toto'))

Thanks!

DEV Community: Martin Ratinaud

Send from your business email address

Configure Google App Passwords

Configure Gmail

PRO Tips

Filtering

Redirection alias

Unlimited free business email addresses for your startup

Setup Business email address

Enable email handling in Cloudflare

Create email address

Create as many addresses as you need

Send email from your business email address

Centering flex items with overflow

For Tailwind

For CSS

Who am I?

Retrieve vanity url and headline from LinkedIn with NextAuth (using r_basicprofile)

Prerequisites

Permissions

Configure Next-Auth

Bonus

Prisma "null or does not exists"

Use Next.js component in posts with Markdown

Internationalize NextJs URLs with next-translate (Part 2)

TLDR

Prerequisites

What will be done

Procedure

Add some utils

Who am I?

Internationalize NextJs URLs with next-translate (Part 1)

TLDR

Prerequisites

What will be done

Procedure

Specify permalinks

Supercharge nextTranslate function

Adapt Link component

Reference

Who am I?

Fetch several branches locally in GitHub actions

Solution

Other workaround

Conclusion

Who am I?

Recreate mysql database from frm files and idb

First, retrieve data

Then, retrieve mysql version

Launch mysql/mariadb on local

Copy your old databases to the docker machine

Fix errors

Export your data

Cheers

Generate dynamic social images the easy way

NextJs on vercel - missing files after build when interpolating file names

Setup

Build

ERROR: Could not find /var/task/content/static/en/home.mdx

Reason

Solution

Supercharge `nextTranslate` function