My NextJs Workflow

Aaron Soto • 2025-02-10 • 8 min read

Why I Built This Workflow

I got tired of chasing the newest features without getting more done. I settled on Next.js 14.2—it has everything I need, and I now focus on building, not tinkering. This setup helps me stay fast and organized across every project. Same structure, same tools, no guesswork.

Project Setup

Create Your Project Folder

For me I have always liked right clicking my explorer and creating a new folder. I name it the same as the project name. Then I right click to open in code and I have the terminal open automatically so I am ready to start typing the commands.

Terminal

cmd

1npx create-next-app@14.2 my-nextjs-app ./

Install Tools I Use in Every Project

UI Components (ShadCN)

Terminal

cmd

1npx shadcn@latest init
2npx shadcn@latest add button input

I use ShadCN to quickly pull in styled components and keep a consistent design system.

Database (Prisma + PostgreSQL)

cmd

1npm install prisma --save-dev
2npm install @prisma/client
3npx prisma init

Then add your database URL to .env.local:

.env.local

env

1DATABASE_URL="postgresql://user:password@localhost:5432/db"

Set up your schema in prisma/schema.prisma using this base User model and roles:

schema.prisma

typescript

1generator client {
2provider = "prisma-client-js"
3}
4
5datasource db {
6provider = "postgresql"
7url = env("DATABASE_URL")
8}
9
10enum Role {
11user
12admin
13dev
14}
15
16model User {
17id String @id @default(uuid())
18name String?
19email String @unique
20emailVerified DateTime?
21image String?
22role Role @default(user)
23createdAt DateTime @default(now())
24updatedAt DateTime @default(now()) @updatedAt
25accounts Account[]
26sessions Session[]
27
28@@index([email])
29@@map("users")
30}
31
32model Account {
33id String @id @default(uuid())
34userId String
35type String
36provider String
37providerAccountId String
38refresh_token String?
39access_token String?
40expires_at Int?
41token_type String?
42scope String?
43id_token String?
44session_state String?
45user User @relation(fields: [userId], references: [id], onDelete: Cascade)
46
47@@unique([provider, providerAccountId])
48@@map("accounts")
49}
50
51model Session {
52id String @id @default(uuid())
53sessionToken String @unique
54userId String
55expires DateTime
56user User @relation(fields: [userId], references: [id], onDelete: Cascade)
57
58@@map("sessions")
59}
60
61model VerificationToken {
62identifier String
63token String @unique
64expires DateTime
65
66@@unique([identifier, token])
67@@map("verification_tokens")
68}

At the moment the changes we made to schema.prisma are not reflected in the database. To do that, run the following commands:

Terminal

cmd

1npx prisma generate
2npx prisma db push

Auth (NextAuth + Prisma)

I like to use NextAuth for authentication and prisma to manage my database. My database prefrence at the moment is PostgreSQL I use NeonDB.

Terminal

typescript

1npm install next-auth

Then configure it inside /src/lib/auth.ts:

/lib/auth.ts

typescript

1import GoogleProvider from "next-auth/providers/google";
2import { NextAuthOptions } from "next-auth";
3import { PrismaAdapter } from "@next-auth/prisma-adapter";
4import { PrismaClient } from "@prisma/client";
5
6const prisma = new PrismaClient();
7
8export const authOptions: NextAuthOptions = {
9adapter: PrismaAdapter(prisma),
10providers: [
11  GoogleProvider({
12    clientId: process.env.GOOGLE_CLIENT_ID as string,
13    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
14  }),
15],
16session: {
17  strategy: "database",
18},
19callbacks: {
20  async session({ session, user }) {
21    if (session.user) {
22      session.user.id = user.id;
23      session.user.role = user.role; // No more TypeScript error
24    }
25    return session;
26  },
27},
28secret: process.env.NEXTAUTH_SECRET,
29};
30
31export const isDev = (session: { user: { role?: string } }) => {
32return session.user.role === "dev";
33};
34
35export const isAdminOrAbove = (session: { user: { role?: string } }) => {
36return session.user.role === "admin" || session.user.role === "dev";
37};

Folder Structure: `src/lib`

I keep all the important logic pieces here. This centralizes things so I only initialize the fonts once, or the prisma client once, etc. Anytime I need one of these "libraries" I just import it from this lib folder and its ready to go.

`/lib/prisma.ts`

/lib/prisma.ts

typescript

1import { PrismaClient } from "@prisma/client";
2
3export const prisma = new PrismaClient();

Use this wherever you need database access. If I have a products table in the schema file then I can from any server component in my nextjs app access the products by using

typescript

1import { prisma } from "@/lib/prisma"
2
3const products = await prisma.product.findMany();

`/lib/fonts.ts`

This is a quick way to use google fonts or local font files in your project. This is a must have for every style system.

/lib/prisma.ts

typescript

1import { Bebas_Neue } from "next/font/google";
2import localFont from "next/font/local";
3
4export const robotoCondensed = localFont({
5src: "../app/fonts/RobotoCondensed.woff",
6display: "swap",
7});
8
9export const bebasNeue = Bebas_Neue({ subsets: ["latin"], weight: "400" });

Use with classNames to apply fonts cleanly across components.

@/components/heading.tsx

typescript

1import { robotoCondensed } from "@/lib/fonts";
2
3export const Heading = (children) => <h1 className={cn("text-3xl", robotoCondensed.className)}>{children}</h1>;

Global Middleware

Create middleware.ts at the root to protect routes:

/middleware.ts

typescript

1import { auth } from "@/lib/auth";
2
3export default auth((req) => {
4if (!req.auth && req.nextUrl.pathname !== "/login") {
5  return Response.redirect(new URL("/login", req.nextUrl.origin));
6}
7});
8
9export const config = {
10matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
11};

Wrap the App in a Session Provider

@/components/session-wrapper.tsx

typescript

1"use client";
2
3import { SessionProvider } from "next-auth/react";
4
5const SessionWrapper = ({ children }) => (
6
7<SessionProvider>{children}</SessionProvider>
8);
9
10export default SessionWrapper;

Wrap your layout in this to make sessions available across pages.

Layout Setup

`/app/layout.tsx`

@/app/layout.tsx

typescript

1import SessionWrapper from "@/components/session-wrapper";
2
3export default function RootLayout({ children }) {
4return (
5  <SessionWrapper>
6    <html lang="en">
7      <body className="flex flex-col min-h-screen">
8        {/* <Navbar /> */}
9        <main className="flex-1">{children}</main>
10        {/* <Footer /> */}
11      </body>
12    </html>
13  </SessionWrapper>
14);
15}

Metadata and PWA Setup

Add Metadata to Layout

Adding metadata to the layout allows you to easily update the title, description, and icons across the site. This is especially useful for SEO best practices and can make your website stand out.

@/app/layout.tsx

typescript

1export const metadata = {
2title: {
3  absolute: "Frontend Developer | Aaron Soto",
4  template: "%s | Aaron Soto",
5},
6authors: [{ name: "Aaron Soto" }],
7description:
8  "Aaron Soto is a Frontend Developer, Designer, and Creator living in Arizona.",
9icons: {
10  icon: "/favicon.ico",
11  apple: "/apple-touch-icon.png",
12  other: [
13    { rel: "icon", url: "/favicon-16x16.png", sizes: "16x16" },
14    { rel: "icon", url: "/favicon-32x32.png", sizes: "32x32" },
15    {
16      rel: "icon",
17      url: "/android-chrome-192x192.png",
18      sizes: "192x192",
19    },
20    {
21      rel: "icon",
22      url: "/android-chrome-512x512.png",
23      sizes: "512x512",
24    },
25  ],
26},
27manifest: "/site.webmanifest",
28};

Make sure the icon files are in /public.

`/public/site.webmanifest`

/public/site.webmanifest

webmanifest

1{
2"name": "Aaron Soto | Portfolio",
3"short_name": "Aaron Soto",
4"icons": [
5  {
6    "src": "/android-chrome-192x192.png",
7    "sizes": "192x192",
8    "type": "image/png"
9  },
10  {
11    "src": "/android-chrome-512x512.png",
12    "sizes": "512x512",
13    "type": "image/png"
14  }
15],
16"theme_color": "#000000",
17"background_color": "#E11E49",
18"display": "standalone"
19}

Extras I Add to Most Projects

- Resend Email API

@/lib/resend.ts

typescript

1import { Resend } from "resend";
2
3const resend = new Resend(process.env.RESEND_API_KEY!);
4
5export default resend;

- Stripe API

@/lib/stripe.ts

typescript

1import Stripe from "stripe";
2
3export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
4apiVersion: "2025-02-24.acacia",
5});

Use it like this:

@/pages/api/checkout.ts

typescript

1const session = await stripe.checkout.sessions.retrieve(session_Id);

- `next.config.mjs`

We have to add strip to the remote patterns for our nextjs images since we would like to show images from stripe.

next.config.mjs

javascript

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3images: {
4  dangerouslyAllowSVG: true,
5  remotePatterns: [
6    {
7      protocol: "https",
8      hostname: "files.stripe.com",
9    },
10  ],
11},
12};
13
14export default nextConfig;

Comments

Be the first to comment.

My NextJs Workflow

Why I Built This Workflow

Project Setup

Create Your Project Folder

Install Tools I Use in Every Project

UI Components (ShadCN)

Auth (NextAuth + Prisma)

Folder Structure: src/lib

/lib/prisma.ts

/lib/fonts.ts

Global Middleware

Wrap the App in a Session Provider

Layout Setup

/app/layout.tsx

Metadata and PWA Setup

Add Metadata to Layout

/public/site.webmanifest

Extras I Add to Most Projects

- Resend Email API

- Stripe API

- next.config.mjs

Comments

Folder Structure: `src/lib`

`/lib/prisma.ts`

`/lib/fonts.ts`

`/app/layout.tsx`

`/public/site.webmanifest`

- `next.config.mjs`