DEV Community: Agam

Custom BeeHiiv Home Page with Cloudflare

Agam — Tue, 15 Aug 2023 11:00:43 +0000

Before I migrated from Ghost to BeeHiiv, I wanted to keep my newsletter's landing page, it got me around 1.5k subs from HN because it was unique - so I knew I need to keep it.

To achieve this I managed to use Cloudfalre, and here is how you can too.

Basically, we will create a subdomain for the landing page:

unzip.dev/ → join.unzip.dev - my new home page.
unzip.dev/* - my main website for the newsletter (on BeeHiiv).

This tutorial assumes you also want to use your root domain on BeeHiiv instead of www.yourdomain.com

Step 1 - Connect your domain to BeeHiiv.

First I added my domain unzip.dev.
After verifying, add it to the Web Domain section.

Step 2 - Open a Cloudflare account

Step 3 - Deploy your new home page

I used vercel.com and next.js. For that I added a CNAME to vercel for join.unzip.dev.

Step 4 - Patching CLoudflare

We want to hijack the requests to the root path. For that I had to add the following Cloudflare rules:

For the archive page I had in Ghost (optional).
For the posts, in Ghost there are at: unzip.dev/[slug] on BeeHiiv they are at unzip.dev/p/[slug].
For the homepage I added a redirect from / to join.unzip.dev (on vercel).

Bonus www -> root

To redirect all www. to root you have to add the following record:

Add the following bulk redirects:

AAAA for www with the value 100:: otherwise cloudflare will not run the bulk rules.

API for landing page

To be able to subscribe people via my external landing page, I've added a cloudflare worker as follows:


export default {
  async fetch(request, env, ctx) {

    // Allow everyone to post to here via CORS
    const corsHeaders = {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "POST",
      "Access-Control-Allow-Headers": 'Content-Type'
    };

    // A hack to fix the OPTIONS response for CORS
    if (request.method === "OPTIONS") {
      // Handle CORS preflight requests
      return new Response(null, {
        headers: {...corsHeaders}
      })
    }


    const publicationId = 'pub_YOUR_PUBLICATION_ID';

    // Extract the subscription details from the request body
    const requestBody = await request.json();
    const { email } = requestBody;

      // Create the subscription
      const response = await fetch(`https://api.beehiiv.com/v2/publications/${publicationId}/subscriptions`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${env.BEEHIIV_KEY}`, // Replace with your actual bearer token
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email,
          reactivate_existing: true,
          send_welcome_email: true, // Always send the welcome email
          utm_source: 'join.unzip.dev', 
          utm_medium: 'web',
          referring_site: 'join.unzip.dev', 
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to create subscription');
      }

    return new Response("Subbe", {
        headers: {
          ...corsHeaders,
        },
      });
    }
};

At this point every time someone visits / they will be 301ed to join.unzip.dev (seeing my amazing landing page). Otherwise, they will be redirected to BeeHiiv to see the posts themselves.

I hope this helps other's that want to customize their BeeHiiv landing page.

Unbug, The Free GPT-Powered Bug Finder for Your GitHub (MIT)

Agam — Sun, 04 Jun 2023 15:44:55 +0000

Today I'm releasing my personal CI bug finder GitHub application - called Unbug.

https://github.com/agamm/unbug

It uses openAI's GPT 3.5 to find bugs when you push code in your PRs.

You can install it for free on render (it's just an express application), then create a Github application and install it on any repo you want checked.

Unbug still needs some fine tuning and fixes, but it does work! - You're welcome to contribute to help make it even better :)

Here is the video showcase:

Top developer newsletters

Agam — Sat, 02 Apr 2022 18:33:29 +0000

Here is a curated list of newsletters that I like, they are all vetted 💯.

Console.dev

Finding out about the best DevTools out there can be a daunting task. Console has us covered, with one of the most time effective newsletters I know - just posting a list of tools with a TL;DR about them - and I love them for it!

Signup: https://console.dev/
Email example: link.

Software lead weekly

Oren Ellenbogen (a good friend) the VP Eng @ Forter has created one of the best software management, culture, and soft skills newsletters with more than 29K subscribers. I like his personal take on each curated link he posts.

Signup: https://softwareleadweekly.com/
Email example: link.

Unzip.dev

Staying up to date with the latest trends in the developer world is hard. This is why unzip.dev was created. You get a summary of one trend at a time. Including:

How does it work? 💡
Use cases ✅
Why? 🤔
Why not? 🙅
Tools & players 🛠️
Forecast 🧞 and more...

Disclaimer: I'm the creator of this newsletter. I'd love to hear what you think about the landing page? :)

Signup: https://unzip.dev
Email example: link.

GitHub's Explore Newsletter

Get a digest of trending repositories that are personalized to your GitHub user.
You can even choose the frequency of emails (daily, weekly or monthly).

Signup: github.com/explore/email

Notable newsletters

Pony Foo Weekly: curated newsletter of interesting topics related to web technologies.
hackernewsletter - a weekly curated list of links from HackerNews.

Even more...

For a complete list of newsletters related to developers, you should definetly checkout: zudochkin/awesome-newsletters

Programmatic SEO with Next.js

Agam — Sun, 27 Mar 2022 20:19:48 +0000

Looking for Programmatic SEO consulting? (strategy & implementation) Get in touch here: agam [at] unzip [dot] co

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

This article will cover one of the hottest terms today in the marketing world - Programmatic SEO, and show real-life examples using Next.js.

What is Programmatic SEO?

In short, we are leveraging code to generate organic landing pages at scale, specifically for SEO.
Remember how when you search Google for the best romantic hotels in amsterdam you see booking.com up there in the top 3 search results?

The crazy fact is that they are up there for almost all locations. Try changing amsterdam to goa and most probably you will still see booking.com up there.

They achieve this by utilizing programmatic SEO - they generate 1000s of landing pages for those long-tail keywords, and thus getting tons of organic traffic for all those location keyword permutations.

For a deeper intro on the subject, how it works and why it matters, you can check out: 0x003-programmatic-seo (via unzip.dev the developer trends newsletter).

Why Next.js?

In a real-world scenario, we would generate hundreds if not thousands of landing pages, which brings up some interesting technical constraints we need to address.

Next.js can solve most of our problems by giving us optimized static landing pages, where optimized refers to the SEO “quality” of the page - read more about on-page SEO here:

✅ Pages will be loaded quickly because they are static and on a CDN. Page speed plays a crucial role in SEO rankings.

✅ Having the pages rendered on the server makes them better for crawlers and therefore our SEO.

✅ Having the ability to re-generate the static landing pages lazily when the content is stale via ISR. This way we make sure our landing pages are still relevant with minimal work on our end.

✅ As an added bonus, Next.js plays along well with React (a big plus, ecosystem-wise), is very well maintained (docs, codebase, and examples) and has a great community.

Having all those features baked into our framework makes Next.js a prime candidate for programmatic SEO projects.

Show me the final result!

The full source code of this tutorial is here: next-programmatic-seo-tutorial - (NEW REPO: pseo-next - Next 13 compatible)

We will build a mock eCommerce website with landing pages for each category of products. We will populate them with the highest-ranked products per category.

This is a dummy example, in real life you will need to do real SEO research, have more long-tail keywords and use informative data, but the basic tech details are laid out here.

When the user searches for “10 Best [category] products” they will get to our long-tail, programmatically generated landing pages.

The end result will look like this:

Let’s start!

Mocking our data

In a real-world scenario, this data will be fetched from your real DB, API, or via scraping useful information. We are mocking data only for the purposes of this tutorial.

I will use a nice package called keikaavousi/fake-store-api which sets up a fake eCommerce back-end with MongoDB, that we can use to mock our products.

The altered code for the store is here. (I took the liberty to change the code a bit to add ranking and a dummy data script).

To start it locally check the README.md I created. It will start our server and MongoDB in a docker container. It will look like this:

Now we have a working mock server to fetch data from.

Let’s design our landing pages

We need to come up with a nice way to show all the data we have, in a way that adds value to the end-user.

After doing some keyword research (see the guide here), I decided that our Programmatic SEO landing pages will be of the following format:

“10 Best [category] products” (in the real world, this will be hard to rank for, probably not long-tail enough)

Let’s inspect what a single product looks like when we fetch it from the database:



{
    "id": 1,
    "title": "Sleek Cotton Chair",
    "price": 516,
    "description": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
    "image": "<http://placeimg.com/640/480/cats>",
    "category": "Books",
    "rating": 82,
    "__v": 0
}

For each product we should probably display the: title, description, rating and price. In our Next.js category page we can display them like so:



<div className="grid">
  {products.map(product => {
    return (<a href="#" key={i++} className="card">
      <h3>{product.title}</h3>
      <p>{product.description}</p>
      <p><i>Price: ${product.price}, with rating of: {product.rating}/100</i></p>
    </a>)
  })}
</div>

Generating the landing pages

First, we need to tell Next.js which URLs we want to build beforehand.

In our Next.js project, let’s create a directory with a page like so: pages/best/[category].js. Now let’s add code to fetch the data from our database.

To do so we will use getStaticPaths - it tells Next.js what pages it will need to generate. In our case, we need one per category (we have 22 categories we want to pre-generate).

Without getStaticPaths Next.js will not know what pages to build as we are using a dynamic page [category].js. In addition, we are using fallback: ‘blocking’ so Next.js will try to fetch information for pages it didn’t build already (if we have new information) instead of returning a 404 not found response. It will block until it compiles a static response, so search engine bots will get data and not have to render client side code.



export async function getStaticPaths() {

  // We need to fetch all of the categories from our DB
  const res = await fetch('<http://localhost:6400/products/categories>')
  const categories = await res.json()

  // We need to adhere to the Next.js getStaticPaths structure
  // <https://nextjs.org/docs/basic-features/data-fetching/get-static-paths>
  let paths = categories.map((x)=>{return{'params': {'category': x}}})

  // For blocking see: <https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-blocking>
  return {
    paths,
    fallback: 'blocking'
  };
}

As you can see here, when we create a production build (npm run build), before even entering the site, Next.js has generated all of our pages beforehand (great for CDN'ing our files).



Automotive.html
Automotive.json
Baby.html
Baby.json
Beauty.html
Beauty.json
Books.html
Books.json
Clothing.html
Clothing.json
Computers.html
Computers.json
Electronics.html
Electronics.json

Now that we have each page per category, we need to populate the pages with category-specific data on the top 5 products per category. To do so we will use getStaticProps) which will be called during build time and will fetch data from our database.

Note that params here contains the category we previously generated with getStaticPaths.



export async function getStaticProps({params}) {

  // Let's fetch the latest top ranking items in a category from our DB
  const res = await fetch(`http://localhost:6400/products/category/${params.category}`)
  const products = await res.json()

  // Let's pick the 5 best ranked ones
  const topProducts = products.sort((a,b) => b.rating - a.rating).slice(0, 5);

  // Every time we statically generate this page we will have the time-stamped.
  const stats = new Date().toISOString()

  return { 
    props: { stats: stats, topProducts }
  };
}

Note: we also add the new Date(), so we will have an indication of when we generated the page.

Optimizing our landing pages during runtime

Using ISR, which stands for Incremental Static Regeneration, we can rebuild stale landing pages (landing pages where the data is no more relevant). In our case, these are pages where the ranking changed.

If the ranking of a product is lower than before, we don’t want to showcase it on our landing page → making our landing page more valuable as it is more up to date.

To do so we only need to add one(!) thing, the revalidate property to our getStaticProps.



return { 
    props: { stats: stats, topProducts },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 1 hour
    revalidate: 3600, // 1 hour
  };

Revalidate is really neat. Before, if we wanted to regenerate our pages content, we would have to initiate a full npm run build command to re-generate all of our categories - which could be really time-consuming if we have 1000s of pages. Each visitor request to a revalidate-enabled page will check if enough time has passed. If, in our case, an hour has passed it will fetch the data again and build that specific page. With only the new information - an awesome optimization instead of generating all the pages at once.

Note that the first user after that 1 hour will still have stale data, but the next visitors will have the new information, but this isn’t a real issue in our use case.

Adding SEO tags

We will have to populate SEO-related meta tags with the relevant information for each page. To do so, we will use garmeeh/next-seo.



<NextSeo
  title={`10 Best ${category} Products`}
  description={`10 Best ${category} Products for bestecommerce.com updated daily.`}
/>

In a real-world scenario, we will research the heck out of the SEO metadata we generate, but for this example, I just wanted to show you how to add it to the page. I will recommend some starting points:

Ahrefs blog
Backlinko blog

Recap

Now we have a website with 22 landing pages, optimized for changes in our data.

The next step would be to fine-tune our SEO scores for those pages, which can be done via Lighthouse.

The source code for this tutorial can be found here: agamm/next-programmatic-seo-tutorial - New Repo: pseo-next

Future

Keep in mind that this just scratches the tip of the iceberg. I will create a Next.js programmatic SEO starter template soon. Please comment if you would like something like that and I'll send it via unzip.dev 🚀

If you found this tutorial helpful or interesting I’m sure you will enjoy my Developer-trends newsletter (every 2-3 weeks or so) called unzip.dev.

Other than that if you like this type of content, please follow me on Twitter.

Self-hosted newsletter tech stack for $0-7/mo

Agam — Thu, 03 Mar 2022 12:54:27 +0000

A few months ago, I decided to pull the trigger and start a newsletter; I found trends.vc to be a fantastic source of information for general business-related trends. I still keep on waiting for new newsletter issues.

The problem I kept coming across upon my research was that I couldn’t find a decent resource for developer trends. I knew about daily.dev and a few others, but none of them gave me a value-packed analysis of one specific developer trend at a time - like trends.vc.

So I decided to create one. If you want a developer trend sum-up every few weeks so you can build the next big thing, you should probably check it out here: unzip.dev (oh, and it’s totally free! 💝).

Let's begin

To run unzip.dev, I wanted to create a sustainable way to produce my newsletter and not worry about consuming my life with deployment IT. And, all this had to happen fast. I wanted to get something out the door quickly to check the viability of my idea.

Most known newsletter providers did not appeal to me pricing-wise. They can cost over $100s of dollars a month for a relatively modest amount of subscribers. I needed a solution that would cost $5-30 a month, as I just quit my job to start unzip and a few other services.

My newsletter setup uniquely includes:

✅ Open-source core newsletter software

✅ Zero-downtime, CI & CDN for the newsletter website

✅ $7/mo (can be $0 if you can bear shared CPU)

✅ Mail link tracking

✅ Open-source analytics

✅ Automatic welcome email for new subscribers

✅ Backup solution included

The newsletter - Ghost (open-source)

Ghost is a node.js newsletter that you can deploy with ghost.org or self-host yourself.

Having the core of my newsletter be open-source is really important for me. This means I can tinker with and change anything I don’t like. In my case with unzip, I rehauled the theme entirely so I could get the landing page I had always imagined:

Here is the Ghost’s official docs about theming.

PS. I also encourage keeping the Ghost badge; after all, they provide this amazing tool for free.

It wouldn’t feel right not to share the other tools I tried. I think that you need to have a complete picture to find your own stack-fit.

TLDR: The main complaints I have with other tools are the open-source aspect and that the editor didn’t produce an esthetically pleasing experience (I wanted a notion-like result):

ConvertKit - I really didn’t like the editor and pricing, and it isn’t open-source.
Mailchimp - I almost used their API as they are pretty standard, but again, not open-source, and the editor wasn’t great. They have a very unappealing UI which I didn’t want to use… not even in the ‘unsubscribe form.’
Mailerlite - The pricing was more affordable, but it didn’t really feel like it would work for a newsletter like mine. Also, I didn’t like the template builder, and the whole experience felt very choppy.
Tinyletter - I only heard about this source later on, so it wasn’t relevant, but I might’ve used it (note: it is part of Mailchimp).
Revue - Twitter’s answer to newsletters; it was too limiting (not enough theme adjustability), but I liked that it works closely with Twitter.
Substack - Many people suggested substack. It’s cool, but I felt too limited by the landing page designer, and the editor wasn’t 100% what I wanted. I also didn’t plan to create a paid newsletter, which they tailor the product for. However, it might work great for others who wish to start quickly (+1 for MVPs).
Buttondown - I Just heard about them a few days ago. Seems super nice, because of the simplicity and the markdown-centirc approach, plus, the pricing is very acceptable.

The servers - render.com

I started with digital ocean, but I decided to go with render.com because they allowed me to use docker and have zero-downtime deployments with CI/CD automatically fetching the latest commit from GitHub.

So each time I change the Ghost Dockerfile, I automatically get a new deployment, and all this for just $7! Now you can even use shared CPU for $0 (usage-based), which is simply amazing to MVP your newsletter for free. I personally want a good server to handle the load when readers join.

To get Ghost working with render, check out the official guide. For zero-downtime use the / path in the settings:

*Digital Ocean only deployed Ghost to a VPS, and that’s it. I had to ssh inside to fix things, which felt like I was thrown back to 2010. I most definitely prefer render.

CDN - Cloudflare

My newsletter site is static for most users, so I wanted to make sure to use a CDN. I decided to go with Cloudflare.

Make sure you never publish your render IP, so your site is protected by CF.
You can add bot protection because currently, Ghost doesn’t use captcha for the subscriptions (see the gotcha if you plan to use the GitHub theme integration).

Just follow Cloudflare’s onboarding to add your render site, it is super simple.

Mail - Mailgun

Ghost works best with Mailgun because they can provide bulk email out of the box. I had a rough start with them, mainly because I used a subdomain instead of my root domain, but now everything works great after using my root domain.

In my case, I use Google Workspace for my domain, which I want to send and receive emails from the unzip.dev domain. Mailgun suggests you use a subdomain with them, like I said, so you could add their MX records there - don’t do it this if you also use Google Workspace and Cloudflare. I left the MX records with Google and used my root domain for Mailgun verification, and I then added a tracking subdomain with this guide.

Welcome email - Integromat

I used @snirdavid’s suggestion of Integromat for new user emails. Ghost doesn’t have this by default, so I created a Mailgun template for new users.

Then, I connected Ghost and Mailgun to Integromat and followed the Integromat setup. It is pretty straightforward:

CI/CD custom theme

Because I created a custom Ghost theme, I wanted to have an automatic deployment in my Ghost deployment each time the main branch changes. As for my good fortune, I found a ghost integration with Github specifically for this case. It was a godsend!

Note that if you use Cloudflare’s bot protection, it will break the GitHub action from accessing the Ghost instance, so you need to turn it off during deployments.

Analytics - Railway & umami (open-source)

After the Google analytics debacle in Europe, I decided that I wanted to use a more privacy-friendly solution. As I’m already paying for render and wanted to keep costs low for now, I wanted to find free hosting for my type of usage. Thankfully, I found railway that provides free servers and guides for the most common open-source tools you’d ever need. Check the umami guide here.

Backup

Backup is the least automated part. I decided to use Ghost’s export feature. I created a private GitHub repo, and I update it manually every few days.

Extras:

Add a privacy policy. You can try this or this.
Create a Twitter account for your newsletter and consistently publish there.

You should now have a world-class newsletter solution for only $7/mo! Happy to help :)

One small request, though, if you do end up using this, please tweet at me @agammore, I’d love to know this helped someone, and I’d love to share your newsletter when you do start one :)

You can also reach out for any questions here in a comment or via Twitter.

I curated a list of developer-first products

Agam — Fri, 01 Oct 2021 19:33:28 +0000

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

I'd love to hear what you think and if it helped you:

https://github.com/agamm/awesome-developer-first

Here's my definition:

   - Developers are the target audience.
   - "Headless", "API-first", "SaaS" are frequently used keywords.
   - Usually, this means that the front page has some code examples.
   - Products - tools/services that people pay for.

I felt like there is no place that aggregates all of these kinds of products. This way we can find solutions to our daily problems, and sometimes not re-invent the wheel or even save time and money 👍.

If you find anything missing open a PR, but don't forget to read the contribution guide.

Posting YouTube-only articles is hurting the quality in Dev.to

Agam — Fri, 04 Dec 2020 21:45:17 +0000

I recently saw several authors here post what I call Youtube-only or "ghost" articles. Where they leverage the SEO of dev.to and the community to promote their Youtube (or other external links).

I think that it could be nice if they had to write a textual version in dev to also, and not just link it. It seems like it will add (I dare to say) spammy noise if not tackled.

Ideas I had, I didn't think them though, they are just starting points:

Have a voting system to remove content-less articles.
Allow posting Youtube only after a certain amount of rep.
Force a minimum amount of text if you link YouTube.

Maybe this is only my thoughts, but I wanted to share before this becomes the next medium.com

How to use express js with dotenv and ES6 modules

Agam — Fri, 04 Dec 2020 21:37:32 +0000

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

I'm assuming you are using nodejs with a version later than 13.
First, you will need to change your package.json to:

{
  "name": "api",
  "version": "1.0.0",
  "type": "module", 
  ...
}

(The type is the important part).

Now you can freely use imports, here is an express start with dotenv

import dotenv  from "dotenv"
import express from "express"

dotenv.config()

const app = express()
const port = process.env.PORT || 5000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Notes:
Having dotenv gives you the ability to add environment variables into .env files and use them easily in your express (in this case) app.

Can Nextjs Replace Traditional Web Frameworks?

Agam — Wed, 25 Nov 2020 19:10:27 +0000

I was wondering for my next project if I can use nextjs independently.
Not just for SSR/SSG capabilities, but also for handling what was traditionally done by web-
frameworks like express / laravel / django etc...
Meaning using the API routes of nextjs.

Is there any gap that I'm missing? what can't it do and they can? is it considered a bad practice?

Next.js 10 with Tailwind 2; in 2 Minutes

Agam — Fri, 20 Nov 2020 16:57:51 +0000

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

No BS, let's get right to it.

Create a new Next.js project

npx create-next-app <your-app-name>
Now cd to your project cd <your-app-name>

Install dependencies

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Configure tailwind

Then npx tailwind init
Now let's import the tailwind css, delete all styles in styles and create: styles/tailwind.css with the contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

PostCSS

Create postcss.config.js file (next.js uses it automatically).

module.exports = {
    plugins: ['tailwindcss'],
}

Override the default styling

Replace import '../styles/globals.css' in pages/_app.js with: import '../styles/tailwind.css';

Add a test

Let's rewrite pages/index.js

import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex justify-center">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="mt-4 p-4 w-1/4 rounded bg-blue-300 text-center">
        <p className="text-blue-600">This should be very blue.</p>
      </div>
    </div>
  )
}

Run

yarn dev and go to: localhost:3000

Result

React Hooks, Routing with a Layout

Agam — Fri, 20 Nov 2020 14:32:52 +0000

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

Let's create a consistent layout for our react hook routing project.

If you want the basic routing from the last tutorial head here: React Hooks with Routing the Easy way

If there is a better way of achieving this with Paratron/hookrouter, please let me know in the comments.

Create a layout

I'm using tailwind2, you can do it too here.

import {useTitle} from 'hookrouter';
function Layout({ children, title }) {
    useTitle(title);
    return (
        <div className="flex flex-col items-strech">
            <header className="w-full bg-blue-100 text-center">
                This is my header - {title}
            </header>
            <main className="w-full bg-blue-300 text-center">
                {children}
            </main>
            <footer className="w-full bg-blue-600 text-center">
                This is my footer.
            </footer>
        </div>
    );
}
export default Layout;

Bonus: Let's make it nicer to import pages

Move all of your pages to a new directory named pages. There create an index.js file:

import HomePage from './HomePage';
import AboutPage from './AboutPage';
import NotFoundPage from './NotFoundPage';


export {
    HomePage,
    AboutPage,
    NotFoundPage
}

Let's import and use it in App.js

import './App.css';
import {useRoutes} from 'hookrouter';
import Layout from './Layout';

// Pages - This is the previous bonus
import {HomePage, AboutPage, NotFoundPage} from './pages/';

// This applies our layout
function withLayout(page, title){
  return <Layout title={title}>{page}</Layout>
}

const routes = {
  '/': () => withLayout(<HomePage />, "Home"),
  '/about': () => withLayout(<AboutPage />, "About"),
};

function App() {
  const routeResult = useRoutes(routes);
  return routeResult || withLayout(<NotFoundPage />, "Not found!");
}

export default App;

It should look something like:

React Hooks with Routing the Easy way

Agam — Fri, 20 Nov 2020 13:43:04 +0000

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

No need for react-router nowadays, let's use a more simplistic approach with Paratron/hookrouter.

Install

npm install hookrouter

Simple example

In app.js we can write

import {useRoutes} from 'hookrouter';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

const routes = {
  '/': () => <HomePage />,
  '/about': () => <AboutPage />,
};

function App() {
  const routeResult = useRoutes(routes);
  return routeResult || <NotFoundPage />;
}

export default App;

HomePage can look like:

import {A} from 'hookrouter';
function HomePage() {
    return (
        <div className="Home">
        Home Page
        Go to <a href="/about">About</a>.
        </div>
    );
}
export default HomePage;

Layout

I've created another tutorial that explains how to structure a project with a layout - React Hooks, Routing with a Layout.

More examples: