Setting up Next.js 14+

Setting up Next.js is a very debated topic as different teams all have their own wants and needs. In this guide I will walk you through a set up that I used on several project with different teams and it always gets up and running fast.

Why not just use the instructions at https://nextjs.org/docs/getting-started/installation ? A good as as the docs are it only gives you a barebones installation.

This guide adds:

  • Client cookies interaction
  • Setup context. Sorry I don’t do Redux.
  • Using google fonts
  • and so other bits and bobs you will need

Note: make sure your Node is setup properly and is a more recent version.
I use v20+ but anything over v18.17 will work fine.

Table Of Contents
  1. Installing Next.js
  2. Installing dependancies
  3. Tailwind adjustments
  4. Setting up your site structure
  5. Changes to the standard Next setup

Installing Next.js

Using terminal navigate to the parent folder where you want to keep the project and enter the following: 

npx create-next-app@latest

# prompt reply
Need to install the following packages:
  create-next-app@14.1.4
Ok to proceed? (y) <--- select y

What is your project named? my-app <--- our app name 

Would you like to use TypeScript? No / Yes <--- Yes
Would you like to use ESLint? No / Yes <--- Yes
Would you like to use Tailwind CSS? No / Yes <--- Yes
// I recommend you use the src folder as it will help the backenders 
Would you like to use `src/` directory? No / Yes <--- Yes
// app router is where all the magic is at
Would you like to use App Router? (recommended) No / Yes <--- Yes
// choose no unless you want to cause yourself a lot of grief
Would you like to customize the default import alias (@/*)? No / Yes */ <--- No

It will now install everything. Go get a cup of coffee, tea, beer, wine or what ever floats your boat as it takes a while. Once you get the message 

Success! Created nextboiler at /Users/raynoppework/Sites/next/nextboiler

it is all ready, open your spiffy new project in your favourite editor of choice and open the terminal in the editor or just cd into your new folder in terminal.

Installing dependancies

Only install the dependencies you need.

# this will help access cookies in the front end
npm install next-client-cookies 

# help you with controlling typography and forms
npm install @tailwindcss/typography @tailwindcss/forms --save-dev

# if you are planning on using Postgres
npm install pg

# if you are planning on useing typesense
npm install typesense

# uuid: because using sequencial numbers as ids is so last week plus a security risk
npm install uuid

# memory cache: creates a server cache you can use for storing lookups like connection strings used in aws secrets manager
npm install memory-cache

# toast messages 
npm install react-toastify

Tailwind adjustments

Lets get tailwind css setup only a few minor adjustments.

In your root open the file tailwind.config.ts and change line 18 to include the form and typography plugins.

tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};
export default config;

Setting up your site structure

In the src folder create the following folders:

  • components
  • lib

Inside the components folder create the following folder

  • shared

Inside the shared folder create two files:

  • footer.tsx
  • header.tsx

Your starting folder structure should now look like:

Changes to the standard Next setup

Adding context to Next.js

Create a new file called context.tsx in the shared components folder. This will add the context to all your client side components yet still maintain server side rendering. Clever these folks at Next.

src/app/components/shared/context.tsx
"use client";
import React, { createContext, useState } from 'react';

const AppContext = createContext({
    user: {
        id: 0,
        firstName: "",
        email: "",
    },
})

export function ContextProvider({ children }: { children: React.ReactNode }) {
    const [user, setUser] = useState({ id: 0, firstName: "", email: "" });

    const context = {
        user,
        setUser,
    }

    return <AppContext.Provider value={context}>
        {children}
    </AppContext.Provider>
}

export default AppContext;

Updating the layout file with support for context and client side cookies and multiple google fonts

We will also change the site to use multiple google fonts as most sites use a font for body copy and a different font for headings.

src/app/layout.tsx
import type { Metadata } from "next";
import { Inter, Cormorant } from "next/font/google";
import { CookiesProvider } from 'next-client-cookies/server';
import { ContextProvider } from "@/components/shared/context";
import "./globals.css";

// change to add additional fonts
const inter = Inter({
  subsets: ["latin"],
  variable: '--font-inter',
});

const cormorant = Cormorant({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-cormorant',
})

// changed to allow for dynamic metadata
export const metadata: Metadata = {
  title: {
    default: "NEXT.JS | The Boiler Plate",
    template: "%s | NEXT.JS",
  },
  description: "Generated by create next app modified by Ray Noppe",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      {/* body updated to include font variables and also set full height and width which will help with flexbox layouts */}
      <body className={`${inter.variable} ${cormorant.variable} font-sans h-full mih-full`}>
        {/* CookiesProvider added to allow for client side cookies */}
        <CookiesProvider>
          {/* ContextProvider added to allow for global state management */}
          <ContextProvider>{children}</ContextProvider>
        </CookiesProvider>
      </body>
    </html>
  );
}
Scroll to Top