Nextjs Crud :: Setup

2-minute read

Setup

So the gist of the below is that we are creating a starter nextjs application, typescript, converting to yarn and finally installing both tailwind css and tailwind jit.

λ> npx create-next-app nextjs-crud --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
λ> cd nextjs-crud
λ> touch tsconfig.json
λ> npm install --save-dev typescript @types/react
λ> rm -f package-lock.json
λ> yarn add -d [email protected] [email protected] [email protected]
λ> npx tailwindcss init -p
λ> yarn add @tailwindcss/jit tailwindcss postcss

if you want to learn more about the ‘why’ you should use the jit instead of using tailwind directly,

The following are just nice to have when cleaning up the code as we go

yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
yarn add -D prettier

Enabling webpack 5 nextjs

Just open up the next.config.js and ensure this is set

module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'big-shoulders': ['"Big Shoulders Display"']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Adding a custom font

I really wanted to use a fun font, so I ended up grabbing “big shoulders” from google fonts.

So I added the custom font to the _document.tsx page, namily because that was the place I saw you could inject information into the head block

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.gstatic.com"/>
                    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:[email protected]&display=swap" rel="stylesheet"/>
                </Head>
                <body className="bg-gradient-to-r from-yellow-400 via-black-500 to-pink-500">
                <Main />
                <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

Then toss the custom font information into the tailwind css config

module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'big-shoulders': ['"Big Shoulders Display"']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

So at this point the code is little more than a nice playground to get started creating an application. In the upcoming sections im going to break into how to fetch and work with nextjs as a simple crud application.

This Post Was Last Updated: Fri, 25 Jun 2021 10:21:39 -0600