DEV Community: Ivan

Trying out the app directory in Next.js

Ivan — Sun, 26 Mar 2023 14:39:45 +0000

A beginner's guide to exploring the new Next.js app directory and server components

I've been avoiding trying the new app folder, mostly because I just recently got the hang of Next.js server-side functions, and was a little upset that they were introducing something new. However, in this field, it's important to adapt and be open to learning new things, especially in the fast-moving JavaScript ecosystem.

For those of you who are not familiar, Next.js has introduced a new app directory with a new layout and conventions. Although they haven't said it will replace the pages folder (the previous way of creating routes), it seems likely that it will.

To get a better understanding of how the new layout works and see if I like it, I decided to create a simple Pokémon app.

Let's get started

Run the following command to create a new Next.js app:

npx create-next-app@latest --typescript next-app-folder-pokemon

Make sure to respond "yes" to all the prompts, especially the one that asks if you want to use the experimental app directory.

Now navigate to the next-app-folder-pokemon directory

Let's add the TypeScript types for Pokémon, just to ensure that TypeScript doesn't cause any issues later.

src/types/index.ts

export interface Pokemon {
  id: number;
  name: string;
  height: number;
  weight: number;
  abilities: {
    ability: {
      name: string;
    };
  }[];
  sprites: {
    front_default: string;
  };
  types: {
    type: {
      name: Types;
    };
  }[];
  stats: {
    base_stat: number;
    stat: {
      name: string;
    };
  }[];
}

interface PokemonFromList {
  name: string;
  url: string;
}

export interface Pokemons {
  count: number;
  next: string;
  previous: string;
  results: PokemonFromList[];
}

type Types =
  | "normal"
  | "fighting"
  | "flying"
  | "poison"
  | "ground"
  | "rock"
  | "bug"
  | "ghost"
  | "steel"
  | "fire"
  | "water"
  | "grass"
  | "electric"
  | "psychic"
  | "ice"
  | "dragon"
  | "dark"
  | "fairy";

Furthermore, we need to specify the image hostname (for the Pokemon images) in the next.config.js file to enable the use of Next's Image component to display images.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  // here
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'raw.githubusercontent.com',
      },
    ],
  },
}

module.exports = nextConfig

Next, let's create a services folder inside the src directory. Here, we will add a pokemon.ts file, which will contain the two fetching functions we'll use in this app.

src/services/pokemon.ts

import { Pokemon, Pokemons } from "@/types";

const POKEMON_API = "https://pokeapi.co/api/v2";

export async function getPokemon(id: string): Promise<Pokemon> {
  const response = await fetch(`${POKEMON_API}/pokemon/${id}`);
  const data = await response.json();
  return data;
}

export async function getPokemons(): Promise<Pokemons> {
  // only fetch the first 151 pokemons
  const response = await fetch(`${POKEMON_API}/pokemon?limit=151&offset=0`);
  const data = await response.json();
  return data;
}

Server Components

The app directory includes a remarkable feature of server components, allowing developers to build React components that can function on the server, similar to traditional server-side rendering. This feature not only provides enhanced performance but also offers greater flexibility. Although I can only provide a brief summary here, you can explore this topic further by watching this informative talk.

What I found particularly noteworthy about server components is that they provide greater flexibility when it comes to data fetching. With server components, developers can await the fetch function directly within the component, eliminating the need for the useEffect hook to fetch data. This can simplify the code and make it easier to manage data fetching within components.

Let me show you.

Modify the src/app/page.tsx with the following content

import Image from "next/image";
import Link from "next/link";

import { getPokemons } from "@/services/pokemon";

const SPRITE_URL =
  "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon";

export default async function Page() {
  // this magic here
  const results = await getPokemons();

  return (
    <div>
      <div>
        {results.results?.map((pokemon, index) => (
          <Link href={`/pokemon/${pokemon.name}`} key={pokemon.name}>
            <Image
              alt={pokemon.name}
              width={100}
              height={100}
              src={`${SPRITE_URL}/${index + 1}.png`}
            />
            <p>{pokemon.name}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}

This page displays a list of Pokemon that can be clicked to navigate to their respective page, which we will create shortly.

In the new app directory in Next.js, dynamic routes work similarly to how they did in the previous pages folder. To create a dynamic route, we need to create a folder with square brackets and the name of the parameter we want to use. For example, to create a dynamic route using the slug parameter, we would create a folder named [slug] in the pages directory. The most important file in this context is the page.tsx file, which defines anything imported from it as a page. While Next.js also provides layout and template files for more advanced customization, we won't be using them in this tutorial.

To create a pokemon/:slug route, create the following folders and file inside the app directory pokemon/[slug]/page.tsx, then add the following content inside the file:


import Link from "next/link";

import Image from "next/image";

import { getPokemon, getPokemons } from "@/services/pokemon";

type Params = {
  params: {
    slug: string;
  };
};

export default async function Pokemon({ params }: Params) {
  const { slug } = params;
  // magic strikes again
  const pokemon = await getPokemon(slug);

  const sprite = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${pokemon.id}.svg`;

  return (
    <div>
      <Link href="/">Home</Link>
      <h1>{pokemon?.name}</h1>
      <Image
        width={400}
        height={400}
        src={sprite}
        alt={pokemon?.name}
        priority
      />
    </div>
  );
}

export async function generateStaticParams() {
  const res = await getPokemons();

  return res.results.map((pokemon) => ({
    slug: pokemon.name,
  }));
}

In this code block, we see the implementation of the Pokemon page that is linked to the previous page. It imports the necessary components from Next.js, as well as the getPokemon and getPokemons functions from the pokemon service.

The Pokemon function takes in a parameter object with a slug property, which is used to fetch the data of the specific Pokemon. The fetched data is then used to display the Pokemon's name and image on the page. The image URL is constructed using the Pokemon's ID and a pre-defined image URL template.

One notable difference from previous code examples is the addition of the generateStaticParams function. This function is a replacement for the getStaticPaths function and is responsible for generating the parameters (in this case, slugs) required for generating all the Pokemon pages statically.

Overall, the Pokemon component is relatively straightforward, utilizing the power of server components to fetch and display the required data for each Pokemon page.

Metadata

Previously, I often used the next-seo library to handle my metadata needs, although Next.js also provides a <Head/> component for this purpose. However, the new app folder has some changes to how metadata is handled.

For static metadata, we can use the metadata object.

Let's see an example of this in the src/app/page.tsx file:

// at the end of the file
export const metadata = {
  title: "Trying the new app folder",
  description: "Pokemon app made with Next.js",
};

Since each Pokémon page should have unique metadata with its image and information, using static metadata won't suffice in src/app/pokemon/[slug]/page.tsx. Instead, we can use the generateMetadata function to create dynamic metadata for each page.

// need to add the Metada type import
import type { Metadata } from "next";


// at the end of the file
export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const pokemon = await getPokemon(params.slug);

  return {
    title: `${pokemon.name} | Next.js + Pokemon`,
    description: `${pokemon.name} | Next.js + Pokemon`,
    openGraph: {
      title: `${pokemon.name} | Next.js + Pokemon`,
      description: `${pokemon.name} | Next.js + Pokemon`,
      images: [
        {
          url: pokemon.sprites.front_default,
          width: 400,
          height: 400,
          alt: pokemon.name,
        },
      ],
    },
  };
}

Although the app directory brings or enables more features in combination with React, I won't go over all of them in this article. This was just meant to document my experience trying this new layout that Next.js is introducing. However, feel free to explore and mention any features that you consider worth highlighting in the comments.

I also added some styles to the app and deployed the app so that you can see it live. You can check out the live site at https://pokemon-app-directory.vercel.app and view the repository at https://github.com/ivanms1/pokemon-app-directory.

Conclusion

Overall, I had a pleasant experience trying out the new app directory in Next.js. While I intended to experiment with the new layout, I found myself more intrigued by Server Components and their potential to simplify development. However, I do have some concerns about how quickly the ecosystem will adapt to this new feature. A quick search revealed that many libraries do not yet support Server Components, and some would need a structural change to support them.

Regarding the change from the pages directory to the app directory, I think it's a positive move. It was frustrating that every file created in the pages folder became a page, and I know many others had workarounds to create a more page-like folder structure. Nonetheless, I don't think there's anything strictly difficult that would make the migration a hassle. I didn't explore the templates and layout files in-depth, but I'm sure they would come in handy for a larger application.

That's all for now, thank you for reading! If you found this article helpful, please consider sharing it and giving it a like. Also, feel free to follow me for more articles in the future.

Take your Next js + GraphQL + TypeScript Setup to the next level

Ivan — Tue, 28 Feb 2023 13:11:14 +0000

Integrating the full range of Next.js features with Apollo Client.

This is a continuation of the Next js + GraphQL + TypeScript Setup article

Welcome back to our blog continuation! In this post, we'll show you how to take advantage of Next.js capabilities in combination with Apollo and GraphQL. Our focus will be on integrating Apollo Client with some of Next.js most essential features, including server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR). However, before we dive into the specifics, let's take a quick look at what each of these features involves.

What is SSR?

Server-Side Rendering (SSR) is a technique that allows you to pre-render your website's pages on the server and serve them to the client as HTML files. With SSR, the initial page load is faster because the server sends the HTML file with the rendered content, rather than sending a blank page that needs to be filled with content after the JavaScript loads.

In addition to improving initial page load times, SSR can also improve SEO, as search engines can easily crawl and index your pre-rendered pages. SSR can also help to optimize performance for users with slow internet connections or less powerful devices.

SSR can be implemented in many ways, but Next.js provides a built-in API that simplifies the process. By using Next.js, you can easily enable SSR for your React components, allowing you to take advantage of the benefits of SSR without needing to write a lot of server-side code.

What about SSG and ISR?

Static site generation (SSG) is a method of building websites that pre-renders all pages of a website at build time, and serves those pre-rendered pages to users, as opposed to generating pages on demand. While SSG is a fast and scalable approach to building websites, it has the limitation that every time you want to update any content, you need to rebuild the entire site. Incremental Static Regeneration (ISR) is a feature of Next.js that addresses this limitation by allowing you to update specific pages of your website without rebuilding the entire site.

It's important to note that SSG and ISR offer the benefits of SSR while also being more performant.

In the next sections, we will look at how you can combine SSR and ISR with GraphQL and Apollo Client to take your Next.js app to the next level.

Apollo's cache and SSR/SSG/ISR

Apollo Client provides a powerful cache system that allows you to manage the state of your application and access data quickly without having to make a network request. When you use Apollo Client to make a GraphQL query, the results are automatically stored in the cache, making subsequent requests for the same data much faster.

To achieve SSR/SSG/ISR in a Next.js app, you can make a network request on the server using Apollo Client and pre-populate the cache with the data. This allows the data to be immediately available on the client side, without the need for additional network requests.

By using the cache in combination with SSR/SSG/ISR, you can greatly improve the performance and user experience of your app, ensuring that data is always available quickly and reliably.

Here is a little diagram.

App Setup

To start I am going to use this boilerplate that has already TypeScript and Apollo setup in Next js.

Let's do this

Install the following dependencies.
```
npm install lodash-es deepmerge
```
We will need these libraries to mutate the Apollo cache later on.

Install the types for lodash-es

npm install --save-dev @types/lodash-es

Create a folder called apollo with an index.ts file inside.
Inside this file, create a function that initializes the apollo client.
```
import { ApolloClient, InMemoryCache } from '@apollo/client';

const COUNTRIES_API = 'https://countries.trevorblades.com';

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    uri: COUNTRIES_API,
    cache: new InMemoryCache(),
  });
}
```
This should look familiar, now it's just abstracted into a function. Here we create an instance of an Apollo Client, the ssr property is very important here, it determines whether the client is being used in server-side rendering mode (true) or client-side rendering mode (false). All of this is based on if window is defined or not.

Inside the same file create a function called initializeApollo with the following content.

import merge from 'deepmerge';
import isEqual from 'lodash-es/isEqual';
import { ApolloClient, InMemoryCache } from '@apollo/client';

let apolloClient: ApolloClient<NormalizedCacheObject> | null;

function createApolloClient() {
//...
}

export function initializeApollo(initialState?: any) {
  const _apolloClient = apolloClient ?? createApolloClient();

  if (initialState) {
    const existingCache = _apolloClient.cache.extract();

    const data = merge(initialState, existingCache, {
      arrayMerge: (destinationArray, sourceArray) => [
        ...sourceArray,
        ...destinationArray.filter((d) =>
          sourceArray.every((s) => !isEqual(d, s))
        ),
      ],
    });
    _apolloClient.cache.restore(data);
  }

  if (typeof window === 'undefined') {
    return _apolloClient;
  }

  if (!apolloClient) {
    apolloClient = _apolloClient;
  }

  return _apolloClient;
}

This function initializes the Apollo client. It creates a new variable called _apolloClient with an existing apolloClient if it exists, or with a new instance of createApolloClient() if it doesn't. This ensures that there is only one instance of the client throughout the application. If there is an initial state, it extracts the existing cache from _apolloClient, merges it with the initialState using merge(), and then restores the merged data into the cache. This allows the initial state to be used in any subsequent queries.

The last function in this file will be addApolloState

import merge from 'deepmerge';
import isEqual from 'lodash/isEqual';
import { ApolloClient, InMemoryCache } from '@apollo/client';

let apolloClient: ApolloClient<NormalizedCacheObject> | null;

export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';

function createApolloClient() {
  // ...
}

export function initializeApollo(initialState?: any) {
  // ...
}

export function addApolloState(
  client: ApolloClient<NormalizedCacheObject>,
  pageProps: any
) {
  if (pageProps?.props) {
    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
  }

  return pageProps;
}

This utility function, called addApolloState, takes two parameters: an instance of an of Apollo client and an object containing props passed to a Next.js page called pageProps.

The function then checks if the pageProps object has a property called props. If it does, it adds the Apollo Client cache state to the pageProps.props object using the identifier APOLLO_STATE_PROP_NAME.

Finally, the function returns the pageProps object with the Apollo Client cache state added to it. This function will be used in a Next.js page's getStaticProps/getServerSideProps function to inject the Apollo Client cache state.

Now let's create a hook that will help us get the Apollo client and pass it to our app. Create a folder called hooks with a file called useApollo.ts
```
import { useMemo } from 'react';

import { APOLLO_STATE_PROP_NAME, initializeApollo } from '../apollo';

function useApollo(pageProps: any) {
  const state = pageProps[APOLLO_STATE_PROP_NAME];
  const client = useMemo(() => initializeApollo(state), [state]);

  return client;
}

export default useApollo;
```
The hook first retrieves the Apollo Client cache state from pageProps using the identifier APOLLO_STATE_PROP_NAME. It then calls the initializeApollo function we created before to get either an existing or new instance of the Apollo client.

Now we are finally ready to connect the fully pre-populated client with our app. Inside _app.tsx add the following code.

import type { AppProps } from 'next/app';
import { ApolloProvider } from '@apollo/client';

import useApollo from '../hooks/useApollo';

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  const client = useApollo(pageProps);
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

Now instead of creating the client instance here, we use the useApollo.ts hooks to get the client and pass it to the ApolloProvider

With this change, our Next.js app is now fully connected to our Apollo Client instance and can use GraphQL queries to fetch and display data.

Time to test

Now let's populate the countries query via getStaticProps.

Inside pages/index.tsx add the following code.

import Head from 'next/head';
import { useQuery } from '@apollo/client';
import type { GetStaticProps } from 'next';

import QUERY_COUNTRIES from './queryCountries.graphql';

import { addApolloState, initializeApollo } from '../apollo';

import styles from '../styles/Home.module.css';

export default function Home() {
  // ...
}

export const getStaticProps: GetStaticProps = async (ctx) => {

    const client = initializeApollo();

    await client.query({
      query: QUERY_COUNTRIES
    });

    return addApolloState(client, {
      props: {},
    });
};

So here we initialize the client, make the query and pass the client, with a populated cache, to the addApolloState function along with the page props. We know that this function will add the apollo cache to the pageProps. This ensures that the data is pre-populated in the cache when the page is rendered on the client side.

Now, if you inspect the network tab, you should not see any loading and no requests being made by the useQuery hook on the client, as the data is already available in the cache.

In this example, we utilize the getStaticProps function to generate a static page, which enables SSG/ISR functionality. This approach can also be employed within the getServerSideProps function to provide us with SSR capabilities.

Conclusion

And that's about it!

We have now integrated the capabilities of Next.js with Apollo Client to take our app to the next level.

You can find the complete code here

Don't forget to like, share and star!

Thanks for reading and until the next time.

The last react form library you will ever need

Ivan — Mon, 11 Jul 2022 20:24:39 +0000

It’s been a while so I thought I would share a quick guide for my favorite form library, the mighty react-hook-form.

Instead of just showing you how to use the library, let’s do a little experiment that will showcase its main advantage.

A matter of performance

We have this simple form, two inputs and a submit button.

import { useState } from "react";

import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Form</h1>
      <form>
        <label htmlFor="name">name</label>
        <input
          id="name"
          type="text"
        />
        <label htmlFor="age">age</label>
        <input
          id="age"
          type="number"
        />
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

The state approach

First, we’ll take the popular approach when making controlled forms in react, using state.

Let's create two states, one for the name and another one for the age and use them to control the value of the inputs.

We will also add an onSubmit function that will set and then display the result values.

For our little experiment we want to know the amount of re-renders that are happening under the hood. Outside the component let’s add a variable that will store the number of rerenders.

Final result!

Open the sandbox to see the code in action

Ok, that's a lot of rerenders :(

We won’t notice any performance issues in this small form, but the reality is that the current approach is not very scalable, if we keep adding inputs we will notice some important performance issues.

The react-hook-form approach

Time for react-hook-form to enter the ring.

Let’s try to replicate the same form with this library.

The useForm hook is all we need, spreading the register function and taking care of the submit with the handleSubmit function.

This all makes sense when you see it, here it is.

Open the sandbox to see the code in action

Only one lonely render, the initial one.

You can probably already tell the advantages of react-hook-form and how it will help scale your forms much better.

How?

So how does it track the values without needing to re render.

In two concepts, ref and uncontrolled inputs.

In our first form we rely on state to keep track of the values in our form, so every time the we need to update the values, state needs to be updated as well, causing a re render. react-hook-form uses ref instead, which lets us store the values and update them without causing a re render. We don’t need to control the value of the input with this approach, so that’s why we say the inputs are uncontrolled.

Wrapping up

Performance is the main feature of react-hook-form, but there is a lot more that you can see and explore by yourself, like validation and error handling.

For example

I know some of you are about to write a comment saying this validation can be done natively with the input props. That is true, but the moment you need any customization to display the error then you will need to implement something else. Also, you can implement a lot more validations and other features with this library.

Hope this was helpful and, if you haven’t yet, try this wonderful library and even support them if you are able to.

Please like and share if you found this useful, until next time.

Improve the links to your site with Next js

Ivan — Sat, 09 Apr 2022 07:51:46 +0000

The Goal

I always found cool when a site has a link preview when you share the url somewhere. It's a really simple thing to add, but I feel it brings a lot to your site.

Let's say you have a countries website and you want to share the link for the country of Bolivia, so you share the link on discord.

We are going from this

to this

App Setup

For this project we will use my favorite react meta framework: Next js!

Let's create a new next js app with the following command

npx create-next-app@latest countries-seo --typescript
# or
yarn create next-app countries-seo --typescript

The only library we will be using for this guide is next-seo, to make the SEO management easier.

Let's install it, on the root folder run the following command.

npm install next-seo
# or
yarn add next-seo

We need to get all this country data from somewhere, let's go with this nice countries api for now.

One small but important thing before we continue, in order for the images from the api to render in our app, add the api domain to the next.config.js file.

/** @type {import('next').NextConfig} */

module.exports = {
  images: {
    domains: ["flagcdn.com"],
  },
  reactStrictMode: true,
};

What will the app do?

We are gonna make an app that displays information about a country based on the url. This will be a dynamic route, because we don't want to make a route for every country in the world.

In order to make the SEO dynamic, we need our data to come from the server. We can do this using using either getServerSideProps or getStaticProps, since the data we are dealing with is not gonna change, let's go with getStaticProps.

For a non dynamic route, the SEO can be static, normally you won't need any data fetching on the server side for those cases

If these words don't sound familiar I recommend learning a bit more about next js and its data fetching methods before continuing with this guide.

It's important to use one of these data fetching approaches since it would make the data available wherever we use paste our links, since it will be server side. If we were to fetch on the client, we would not be able to have dynamic link previews like we are going to implement now.

Creating the Component

Let's create a simple component that will render country information. In order to do this we need a dynamic route, inside the pages folder create another folder called country with a [name].tsx file inside and add the following content.

import Image from "next/image";

import type { GetStaticProps } from "next";

interface Country {
  country: {
    name: {
      common: string;
    };
    flags: {
      png: string;
    };
    capital: string;
  };
}

const Country = ({ country }: Country) => {
  if (!country) {
    return (
      <div>
        <p>Country not found</p>
      </div>
    );
  }
  return (
    <div>
      <p>{country?.name?.common}</p>
      <Image
        alt={country.name.common}
        src={country.flags.png}
        height={213}
        width={320}
      />
    </div>
  );
};

Fetching the Data

Now we need to inject the country information to the component. Since this is a dynamic route that will use getStaticProps we need to add a getStaticPaths function to generate a list of paths. The countries api has an endpoint that lists all the countries available, which is perfect for our case, since those will be all our possible paths.

Below the component add the following

export const getStaticPaths = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all");

  const data = await res.json();

  return {
    paths: data?.map((country: { name: { common: string } }) => {
      return {
        params: {
          name: country?.name?.common?.toLowerCase()?.replace(/ .*/,'')
        },
      };
    }),
    fallback: true,
  };
};

Boom, this will generate all the paths for our dynamic route.

The logic to get the country name is not perfect and it will probably miss some cases, but it will work for most countries and for the purpose of this tutorial

Now that we have our paths, create the getStaticProps function. This function will inject the country data to the component.

export const getStaticProps: GetStaticProps = async ({ params }) => {
  try {
    const res = await fetch(
      `https://restcountries.com/v3.1/name/${params?.name}`
    );

    const results = await res.json();
    return {
      props: {
        country: results?.[0] ?? null,
      },
    };
  } catch (error) {
    return {
      props: {
        country: null,
      },
    };
  }
};

We are getting the country name from the url params, and try to perform an api call that will get the country information if the name is valid. If all good we pass the country as a prop to the component or null if the api call fails.

SEO

Finally, we will use next-seo to generate the dynamic link preview. next-seo helps us create meta tags, you could totally do this without it but with the library is a bit easier. I encourage to explore the next-seo docs to see all the options and functionality available, for now we will add a simple configuration that will show the name of the country, capital and flag.

Add the next-seo component:

const Country = ({ country }: Country) => {
  if (!country) {
    return (
      <div>
        <p>Country not found</p>
      </div>
    );
  }
  return (
    <div>
      <p>{country?.name?.common}</p>
      <Image
        alt={country.name.common}
        src={country.flags.png}
        height={213}
        width={320}
      />
      <NextSeo
        openGraph={{
          type: "website",
          title: country.name.common,
          description: `Capital ${country.capital}`,
          images: [
            {
              url: country.flags.png,
              width: 320,
              height: 213,
              alt: country.name.common,
            },
          ],
        }}
      />
    </div>
  );
};

Wrapping up

And we are done!

Your pages/country/[name].tsx file should look like this

import { NextSeo } from "next-seo";
import Image from "next/image";

import type { GetStaticProps } from "next";

interface Country {
  country: {
    name: {
      common: string;
    };
    flags: {
      png: string;
    };
    capital: string;
  };
}

const Country = ({ country }: Country) => {
  if (!country) {
    return (
      <div>
        <p>Country not found</p>
      </div>
    );
  }
  return (
    <div>
      <p>{country?.name?.common}</p>
      <Image
        alt={country.name.common}
        src={country.flags.png}
        height={213}
        width={320}
      />
      <NextSeo
        openGraph={{
          type: "website",
          url: "https://www.example.com/page",
          title: country.name.common,
          description: `Capital ${country.capital}`,
          images: [
            {
              url: country.flags.png,
              width: 320,
              height: 213,
              alt: country.name.common,
            },
          ],
        }}
      />
    </div>
  );
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  try {
    const res = await fetch(
      `https://restcountries.com/v3.1/name/${params?.name}`
    );

    const results = await res.json();
    return {
      props: {
        country: results?.[0] ?? null,
      },
    };
  } catch (error) {
    return {
      props: {
        country: null,
      },
    };
  }
};

export const getStaticPaths = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all");

  const data = await res.json();

  return {
    paths: data?.map((country: { name: { common: string } }) => {
      return {
        params: {
          name: country?.name?.common?.toLowerCase()?.replace(/ .*/, ""),
        },
      };
    }),
    fallback: true,
  };
};

export default Country;

Testing

We can't really test this unless we deploy our app. Next js is a bit special, it requires a bit more to deploy than you normal client side app if you are using any of the SSR features.
Luckily services like Vercel or Netlify (with the next js plugin) make it really easy to deploy our app with all its features for free (for side projects).

Make an account if you don't have one, deploy your app and let's see how the links look.

Now let's test with Fiji!

Share this link somewhere

${Your website's url}/country/fiji

The flag of Fiji should appear

Looks great!

Now go make all your links amazing!

Thank you for reading, if you found this useful please like and share :)

Create react components at the speed of light with Plop.js

Ivan — Sun, 09 Jan 2022 09:07:35 +0000

So you are working in your React app, and it comes the time to create a new component, you already have your ritual down. Go to the components folder, create an index file, create another file for styles and finally one more for testing because you are cool. After all of this, you still have to connect these files and write enough code to make them run. You do this every time... every time.

I am assuming a lot, but if this is actually you I have good news!
What if I told you there is way to automate this boring and tedious process?
Trust me, these next 10 minutes are going to change your life. Let me introduce you to plop.js.

What is Plop.js?

In their own words, it's a tool that saves you time and helps you build new files with consistency.

How does it work?

It's easier than you think, otherwise I wouldn't be writing about it lol. You create file templates and configure a very simple cli.

Let's start

First, let's clone this simple react app, it has nothing but just a basic react setup.

git clone git@github.com:ivanms1/parcel-template.git

And navigate to it

cd parcel-template

Now let's install plop, on the terminal type:

yarn add plop
# or
npm install plop

The Generator

Next, on the root folder, create a file called plopfile.js and add the following content inside.

module.exports = function (plop) {
  plop.setGenerator("component", {
    description: "Create a component",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is this component's name?",
      },
      {
        type: "input",
        name: "element",
        message: "HTML element (div is default)",
        default: "div",
      },
    ],
    actions: [
      {
        type: "add",
        path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
        templateFile: "templates/Component.tsx.hbs",
      },
    ],
  });
};

We are basically configuring a cli to generate our files. plop.setGenerator creates a generator, the first argument is the name of this generator and the second one is an object with some options where we can configure what to generate. Let's analyze the ones we will be using for this guide.

`description`

Pretty self explanatory, a description of your generator, for example: Generator of react components.

`prompts`

Series of steps, questions or instructions we give to the user in order to obtain certain information. Plop stores these in variables to use later in the template files.
In our case we are using input type prompts to get

The component's name.
The component's html tag (div, button, a, etc), it defaults to div.

message is text the user will see and has to interact with, generally a question or an instruction.

`actions`

After we've gather all the information need we then proceed to the actions, represented in an array. In our case we only have one action that creates a file.

Let's go a bit into more details with the actions, since it's where things actually happen. The add action type creates a file, path is simply the file path where the file is going to be created. The template is sort of skeleton that will be used to create the file. Plop uses handlebars, a templating language that generates HTML and other text formats.

You might have noticed that we haven't created our template file, and yeah... we need to do that.

Creating our first template

On the root folder create a folder called templates, and add a file named Component.tsx.hbs with the following content.

import React from "react";

interface {{pascalCase name}}Props {}

const {{pascalCase name}} = () => {
  return <div>{{pascalCase name}}</div>;
};

export default {{pascalCase name}};

As you could probably tell, we are creating a react typescript file, in handlebars the variables are inside double brackets ({{}}). pascalCase converts the name variable, that we get from the prompts, to pascal case. So anywhere you see {{pascalCase name}}, it will be replaced with the component's name.

So although this is cool, so far we are only creating a new file with some pre-written react code. There are snippet extensions that could do almost the same thing. Let's make this a bit more complete by also adding a style file.

Adding a style file

I am gonna be using stitches, a css-in-js library similar to styled components but with near-zero runtime, but feel free to use whatever you want.

Let's install the library first, on the terminal run:

yarn add @stitches/react
# or
npm install @stitches/react

Since we now want to create a style file as well, we need to add another action to our generator. Update plopfile.js with the following.

    actions: [
      {
        type: "add",
        path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
        templateFile: "templates/Component.tsx.hbs",
      },
      // new action here
      {
        type: "add",
        path: "src/components/{{pascalCase name}}/styles.ts",
        templateFile: "templates/styles.ts.hbs",
      },
    ],

Pretty similar to the first action, now we need to add a new template. Inside the templates folder create a file called styles.ts.hbs and add the following content.

import { styled } from '@stitches/react';

export const Styled{{pascalCase name}} = styled('{{element}}', {});

Just your basic css-in-js file, we create a styled component and export it.

Component.tsx.hbs needs to be updated, so it imports and uses the new styled component we made. Now it should look like this:

import React from "react";

import { Styled{{pascalCase name}} } from "./styles";

interface {{pascalCase name}}Props {}

const {{pascalCase name}} = ({} : {{pascalCase name}}Props) => {
  return <Styled{{pascalCase name}}>{{pascalCase name}}</Styled{{pascalCase name}}>;
};

export default {{pascalCase name}};

Now we are talking, plop is saving us some considerable time, generating not one, but two files.

The final step to see this in action is to add the following script to the package.json.

  "scripts": {
    ..., // rest of scripts
    // add this at the end
    "generate": "plop"
  },

We are finally ready, sit down, relax and enjoy the show. On the terminal type

yarn generate
# or
npm run generate

Now let's create a Button component.

With a button tag of course.

If everything went well

Let's check the components folder.

import React from "react";

import { StyledButton } from "./styles";

interface ButtonProps {}

const Button = ({} : ButtonProps) => {
  return <StyledButton>Button</StyledButton>;
};

export default Button;

The styles file is there as well.

import { styled } from '@stitches/react';

export const StyledButton = styled('button', {});

Pretty cool eh?

Ok maybe is not that cool, but hopefully by now you've realized the potential this has.

I've kept this simple and only created two files but you can keep playing with it and add as many generators and actions as you want. All people/teams are different and you can tweak plop to whatever convention/style you may have. You can even update existing files if for example you like having an index file for all your components. You can create generators for hooks, pages, helpers, etc, the sky is the limit.

I hope you liked this guide and let me know if you made any cool generators at @ivanms1

Thank you for taking the time to read this article, if you enjoyed it please like to support and follow for more.

Source Code

Keep your dependencies up to date with Dependabot

Ivan — Thu, 23 Dec 2021 14:53:14 +0000

When you are maintaining a codebase it becomes hard to keep track and update the dependencies installed in your app.

While it's important to keep things up to date, it's also a huge pain. Checking for updates, make sure nothing is breaking, etc. That's where Dependabot comes to help us, it automatically creates pull requests that we can review and test and, if it's all good, merge an update our dependencies.

Github users might already know Dependabot for its security updates, but it can do way more than that. The goal of this post is to setup Dependabot in a way where it keeps track of version updates so you can update your packages on a regular basis.

Why?

Keeping your dependencies updated is generally a good thing, there might be people that have a different approach, if ain't broke don't fix it kind of thing. But packages get better and improve as they get updates (or at least they should). You might get stuck with a bug that is solved in a new version, or never enjoy the performances improvements that updates bring.

When?

Only do this for projects/apps/boilerplates that you are actively maintaining. Setting up Dependabot for a weekend project or something similar will only be an annoyance as Dependabot will spam pull requests in this repository that you don't even use FOREVER, or until you turn it off I guess.

Important Note

Always take time to check and test the pull requests Dependabot creates. Read the changelog, look for any breaking changes that might be announced and if the package is widely used in your app, it's always good to run the branch and test to make everything still works fine in the new version.
Also, don't blame me if you break production, blame Dependabot, or yourself, or the fact that you don't have tests.

Setting up Dependabot

Setting up Dependabot is actually really easy and simple.

In the root folder of your repository, if you don't already have it, create a .github folder.
Inside the .github folder, create a file called dependabot.yml, for this example I am using npm as my package ecosystem. Inside the file copy the following content.



version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"

So what's going on here, This configuration file tells Dependabot the kind of dependency you want to update (package-ecosystem), where the dependency manifest is located (directory), in our case the package.json file, and how often you want Dependabot to look for updates (schedule).

And that's it, you are done. Once you push these changes to github, Dependabot will fire up and start making pull request, don't worry if you think you have a lot of outdated dependencies, there is a limit of how many pull requests it can open at the time that you can configure (5 by default) so you won't get flooded with pull requests.

Now you should see something like this

A Dependabot pull request, looks like this.

The changelog should list all the changes, fixes, improvements, etc. Always take a look to make sure what's new and if there are any breaking changes. If your dependencies are really outdated you might have to look more deeper into past changelogs and test the branch thoroughly. Once again, always test, or better yet, have tests.

Voila!
Now Dependabot will annoy you forever!
Just kidding, this is actually good if you can manage it.

Thank you for reading and if you found this post helpful please like and share :)

Protecting your API keys with Next JS

Ivan — Fri, 12 Feb 2021 13:36:49 +0000

This is the story of Max.

Max thought his API keys were safe because he put them inside an .env file.

Max didn't know his keys were visible in the network tab.

🥲

Max is actually me, Max is actually everyone.

Especially when we are just learning and start playing with public APIs that require a private key.

There is not a good (or any) way to protect your keys in the frontend.
One good alternative is to create a proxy in your own server, since backend code is not exposed to the browser. But many people using these APIs are beginners that don't know much about backend yet.

Well, Next JS comes to save the with its integrated and ready to use API Routes. Which is basically a Node JS environment that you can use to create API endpoints, a server ready to go.

Let's take a look.

Initial setup

First let's create a next js app.

In the terminal run



npx create-next-app next-api-key
# or
yarn create next-app next-api-key

Then move to the app folder



cd next-api-key

A different .env file

Once inside the project we can create a .env.local file. This looks the same as your normal .env files if you are familiar with them. The difference is that the variables inside .env.local are only available in the Node JS environment of Next. This means the browser doesn't have access to them.

So where can we use these variables?

Inside pages, there is another folder called api, any file inside here will be treated as an API endpoint.

It works more or less like this.

On the server side we have pages/api/hello.js



export default (req, res) => {
  res.status(200).json({ name: 'John Doe' })
}

On the client side we can call.



const fetchHello = async (page) => {
  const res = await fetch(`/api/hello`); // notice the naming
  const data = await res.json();
// data = { name: "John Doe" }
  return data;
};

Protecting the keys

So now that we know how that works, let's add a key in the .env.local file.

Let's pretend I have a key that I need to send in the url of my request.

Let's add the key inside .env.local



SECRET_KEY=someSecretKeyThatNoOneShouldSee

And instead of using our key on the client side, we use it inside hello.js.

This variable won't work on the client anyways, read more here



// pages/api/hello.js
import axios from "axios";

export default async (req, res) => {
  const URL = `https://api.i.require.keys/?&api_key=${process.env.SECRET_KEY}`;
  const response = await axios.get(URL);
  res.status(200).json({ data: response.data })
}

You will need to install axios, node-fetch or a similar library to manage the fetching, since fetch API is not available in Node.

Nothing really changes on the client side, but let's use axios since we already installed it for the server.



const fetchHello = (page) => axios.get('/api/hello')

And that's about it, our key is nowhere to be seen in the network tab.

That wasn't too hard right?

Please like and share if you found this helpful.

Until next time!

React Query 101

Ivan — Tue, 09 Feb 2021 23:54:06 +0000

I've always looked at react-query from far away, before I was mainly working with GraphQL and Apollo was a great solution for my querying needs.

Fast forward a couple years and now I am at a different job and I am not using GraphQL anymore. Having heard a lot about react-query I decided to give it a try and see how good it really is.

And...

Insert drum roll

It's actually pretty great, it has all the goodies I enjoyed in Apollo and it's not restricted to GraphQL.

Here is a quick guide to demonstrate some of the many benefits/features of react-query.

First let's create a react project, create-react-app is perfect for this simple demo app.

npx create-react-app react-query --template typescript

# or

yarn create react-app react-query --template typescript

Yes, I am adding TypeScript to this one page application, I can't deal with those yellow icons anymore

Now navigate inside the react-query folder that was just created.

If you are in the terminal just do

cd react-query

Now let's install react-query

 npm i react-query
 # or
 yarn add react-query

Let's also install axios to use it instead of fetch

 npm i axios
 # or
 yarn add axios

Now inside src/App.tsx past the following code

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Random Food Generator</h1>
      <button>Generate</button>
      <img src="insert food url here" 
        alt="food"/>
    </div>
  );
}

export default App;

So the promise of this app is pretty simple, we press a button to get a randomly generated dish. In order to do this we will use the food api ,react-query and axios.

First we need to wrap our in app inside a <QueryProvider /> to connect the queryClient.

Inside src/index.tsx let's import QueryClient and create a new client for the app.

// ...other code

import { QueryClient, QueryClientProvider } from "react-query";

// ...other imports

const queryClient = new QueryClient();

And let's use the QueryClientPovider with the new client we just created.

Still inside src/index.tsx

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

And that's all we need to start firing our queries!

The magic of useQuery

Hooks are here to stay and most of my favorite libraries are using them, react-query is no exception. The useQuery hook is pretty cool, we give it a unique key and a function that returns a promise. In exchange we get the data and other useful props.

Let's see in action, inside src/App.tsx let's add the following code.

First let's import useQuery and axios.

import { useQuery } from "react-query";
import axios from "axios";

Now inside the App component let's use useQuery

  const { data } = useQuery("food", () =>
    axios.get("https://foodish-api.herokuapp.com/api/")
  );

and now in the JSX

 return (
    <div className="App">
      <h1>Random Food Generator</h1>
      <button>Generate</button>
      <img src={data?.image} alt="food" />
    </div>
  );

So far so good, everything seems to work, but if you pay attention you may notice some strange behavior. For example if you go to another tab in your browser, when you come back the query is re-fetched. This is one of the things that caught me off guard when trying react-query for the first time, I remember not having a clue of what was going on and just switching to something else.

Well, apparently it's important to read the docs. react-query has some defaults that can be aggressive but you can easily change them to what you need or you are used to.

These are my defaults.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 3600,
      refetchOnWindowFocus: false,
    },
  },
});

So now we are not re-fetching on window focus and we actually have a stale time.

Besides data we have access to other props that can help us build a better UI by telling us the state of the query.

Let's take a look.

const { data, isFetching, isError, refetch } = useQuery("food", () =>
    axios.get("https://foodish-api.herokuapp.com/api/")
  );

There are more, but we will use these for now. I think these props are pretty self explanatory, let's use them to let the user know what's going on with the query.

function App() {
  const { data, isFetching, isError, refetch } = useQuery("food", () =>
    axios.get("https://foodish-api.herokuapp.com/api/")
  );

  if (isError) {
    return <p>Oops an error happened</p>;
  }

  return (
    <div className="App">
      <h1>Random Food Generator</h1>
      <button type="button" onClick={() => refetch()}>
        Generate
      </button>
      {isFetching ? (
        <p>Loading...</p>
      ) : (
        <img src={data?.data?.image} alt="food" />
      )}
    </div>
  );
}

So first we check for any errors, then connect the button to the refetch function and finally display a loading state when the image is being fetched.

Can we do all of these with fetch?
Yeah of course, but it would have taken a lot more code. A useEffect for fetching the initial data, creating state for the loading and error, and putting everything into a function to do the re-fetch.

This is only scratching the surface of what react-query can do, we didn't even look into the cache how it can replace state management tools like redux.

Anyways, I hope this got you interested in checking react-query, because there is so much more that you can do.

Over and out.

Code: https://github.com/ivanms1/react-query-101

PS: Miss you GraphQL :(

Next js + GraphQL + TypeScript Setup

Ivan — Mon, 24 Aug 2020 07:53:29 +0000

This article will walk you through a simple GraphQL setup for your Next JS app.

This guide is aimed at people already familiar with GraphQL, if you are not I recommend you to go through some tutorials first and see what this is all about. Spoiler alert, GraphQL is awesome.

App Setup

There are a couple ways to do this in this case we will use the create-next-app command.

On your terminal run the following command.

npx create-next-app --ts next-graphql-app

Move to the app folder

cd next-graphql-app

Adding TypeScript

I am a TypeScript freak, I literally can't write normal Javascript anymore. So please bare with me and add TypeScript to your app. Not but seriously, TypeScript is great you should try it. NextJS makes it pretty easy as well.

There used to be some steps here to install and have typescript working with your app, but now you can use the --t flag and soon create-next-app will use typescript by default, so we can skip that part. 🥳

Finally, start app

npm run dev

*It's Alive! *

Adding Apollo GraphQL

So we already have the NextJS + TypeScript part ready, now onto GraphQL.
In this guide we will use a library called Apollo Client to handle the data fetching (urql guide coming soon).

First, let's install Apollo Client and GraphQL

npm install @apollo/client graphql

Before we setup our client, we need an API to connect to. We could make our GraphQL backend, but that would be for another blog. For now we will use an existing countries api, give it a star while you are at it.

With the API url let's create the client we will connect to. Inside pages/_app.tsx add the following code.

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com',
  cache: new InMemoryCache()
});

Now let's connect the client to our app with ApolloProvider.

Your pages/_app.tsx should look like this.

import type { AppProps } from 'next/app';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com',
  cache: new InMemoryCache(),
});

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

So here, we are basically wrapping our app inside an ApolloProvider component that takes the client as a prop.

Fetching Data

Our app is now connected to the countries API but not much is happening. As you can probably already tell, we need to actually fetch the data. Apollo comes with some hooks that will help us with data fetching, in this tutorial we will only use the useQuery hook but feel free to explore all the other hooks Apollo has to offer.

Let's clean up pages/index.tsx from the default stuff that comes with NextJS.

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Countries GraphQL</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Countries</h1>
      <div>
        <h3>Countries go here</h3>
      </div>
    </div>
  );
}

Let's also remove the styles we won't be using from styles/Home.module.css.

/* This is all we need */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Much better :)

A GraphQL query, what we will use to fetch data, looks like this.

query {
    countries {
      code
      name
  }
}

Now, we could write the queries in the same file, but I am a fan of having the queries in a separate file. In order to achieve this we need to make some tweaks to let NextJS know how to read the .graphql files.

Inside the root folder create a file called next.config.js and input the following code.

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });
    return config;
  },
};

This is telling webpack how to load the .graphql files.

Now we need to tell TypeScript about this .graphql file, if we don't it's gonna complain. Inside the root folder create a folder called @types, inside this folder create a file called graphql.d.ts and add the following code.

declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;

  export = Schema;
}

Ok, that should be it. Now let's create a .graphql file, where we will have our query.

For simplicity we will locate our query file inside the pages folder, but feel free to follow whatever convention you have. So, like I said before, inside the pages folder create a file called queryCountries.graphql with the following code.

query {
 countries {
   code
   name
 }
}

Now let's call the query inside pages/index.tsx using the useQuery hook.

import Head from 'next/head';
import { useQuery } from '@apollo/client';

import QUERY_COUNTRIES from './queryCountries.graphql';

import styles from '../styles/Home.module.css';

export default function Home() {
  const { data, loading, error } = useQuery(QUERY_COUNTRIES);

  // check for errors
  if (error) {
    return <p>:( an error happened</p>;
  }

  // if all good return data
  return (
    <div className={styles.container}>
      <Head>
        <title>Countries GraphQL</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Countries</h1>
      {/* let the user know we are fetching the countries */}
      {loading && <p>loading...</p>}
      <div>
        {data.countries.map((country) => (
          <div key={country.code}>{country.name}</div>
        ))}
      </div>
    </div>
  );
}

You should see something like this:

Not very stylish, but the data is there and we are done with our setup.

*You can check the source code here. *

Challenge

Now that we have the data, I challenge you to style the app and tweet me the result at @ivanms1. Remember that you can add more fields to the query, for example flag, capital and currency.

query {
 countries {
   code
   name
   capital
   emoji
   currency
  }
}

Check the playground to see all the fields available.

Hope you enjoyed this tutorial, if you did please like, comment and share so I can keep making more.

Check part 2 of this article here.