darnocer

Example to render Font Awesome Icons dynamically from a database with React

The following example is from a Mood Tracking app in which the user selects "Influences" on their mood which are buttons. Each button pulls the influence name from the "Influences" model in the db and the corresponding Font Awesome icon name that displays on the button.

Sample data from the Influences model:

name	icon
Relationship	heart
Work	briefcase
Friends	user-group

darnocer

openssl rand -hex 32

darnocer

1. Create a /data directory
2. Create a file (eg. content.js) in /data with the data content structure of your app

const content = {
  home: {
    heading: "Welcome!",
    },
  about: {
 heading: "About Us",

darnocer

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

darnocer

Error

./node_modules/@esbuild-plugins/node-resolve/esm/index.js:37:0
Module not found: Can't resolve 'builtin-modules'

Import trace for requested module:
./node_modules/mdx-bundler/dist/index.js
./lib/mdx.js

darnocer

Committing changes to Github

1. Check status of changes

git status

2. Stage files for commit

Specify files:

darnocer

Open in VSCode

Enable the option to right-click a folder and open it directly in VSCode on Mac.

1. Open Automator
2. File > New > Quick Action
3. In the right-hand pane:
   • Worflow receives current files or folders in Finder
   • Optional:
     • Image > Choose... > Select Visual Studio Code from Applications

• Color > Select Color

darnocer

Next.js Versions

See what version of Next.js you're currently using:

npm list next

See the latest version of Next.js that is available:

npm view next version

darnocer

Sharp package causing error

When installing dependencies with npm i, I was running into this unhelpful npm ERR! gyp info... error.

It was resolved by reinstalling the sharp package.

   "sharp": "^0.28.3", // version with error
   "sharp": "^0.32.4", // reinstalled version with no error

darnocer

Legend

🟩 = Component

---

Page Structure

Body