Need Help Starting Out ;-; (Next.js + Tailwind + Neon)

Hi y'all

I'm currently developing my portfolio site with Next.js 14 and the App Router and am very new to databases in general. The reason why I wanted to connect it to neon was to extend my portfolio to have full-stack capabilities: if I ever wanted to add something, I could just log in and then add stuff via a dashboard, etc. I've taken classes in Databases and PostgreSQL in my studies but am just now dipping my toes into getting connections set up to an actual web application. Looking on the Neon Documentation, a lot of existing resources uses the page routers, and if there is mention of the app router, there's not much pertaining to route handlers as a whole. Thus, I've been attempting to get connected by utilizing the neon serverless drivers, but overall I'm still very lost and am not sure where to go.

I have the following in a

.env.local

.env.local

.env.local

.env.local file to start out, details omitted:

DATABASE_URL='omitted for obvious reasons'

DATABASE_URL='omitted for obvious reasons'

DATABASE_URL='omitted for obvious reasons'

DATABASE_URL='omitted for obvious reasons'

And I attempted to make a connection by creating a route handler

app/api/neon/route.ts

app/api/neon/route.ts

app/api/neon/route.ts

app/api/neon/route.ts

import { neon } from "@neondatabase/serverless";
import { NextRequest, NextResponse } from "next/server";

type ResponseData = { message: string }

const sql = neon(process.env.DATABASE_URL);

export default async function handler(req: NextRequest, res: NextResponse<ResponseData>) {
    const response = await sql`SELECT version()`;

    console.log(response);

    res.status(200).json({
        data: response,
    });
}

import { neon } from "@neondatabase/serverless";
import { NextRequest, NextResponse } from "next/server";

type ResponseData = { message: string }

const sql = neon(process.env.DATABASE_URL);

export default async function handler(req: NextRequest, res: NextResponse<ResponseData>) {
    const response = await sql`SELECT version()`;

    console.log(response);

    res.status(200).json({
        data: response,
    });
}

import { neon } from "@neondatabase/serverless";
import { NextRequest, NextResponse } from "next/server";

type ResponseData = { message: string }

const sql = neon(process.env.DATABASE_URL);

export default async function handler(req: NextRequest, res: NextResponse<ResponseData>) {
    const response = await sql`SELECT version()`;

    console.log(response);

    res.status(200).json({
        data: response,
    });
}

import { neon } from "@neondatabase/serverless";
import { NextRequest, NextResponse } from "next/server";

type ResponseData = { message: string }

const sql = neon(process.env.DATABASE_URL);

export default async function handler(req: NextRequest, res: NextResponse<ResponseData>) {
    const response = await sql`SELECT version()`;

    console.log(response);

    res.status(200).json({
        data: response,
    });
}

I'm receiving the following errors thus far:
- on the

const sql

const sql

const sql

const sql : "Argument of type

string | undefined

string | undefined

string | undefined

string | undefined is not assignable to parameter of type

string.

string.

string.

string. Type

undefined

undefined

is not assignable to

string

string

string

string."
- on the

res.status. ...

res.status. ...

res.status. ...

res.status. ...: "This expression is not callable. Type

Number

Number

Number

Number has no call signatures"

If anyone has any great starter resources or knows the issue with my approach, I'd appreciate any feedback whatsoever. I'm very eager to learn and am more than willing to listen.

Thanks,
AJ

Need Help Starting Out ;-; (Next.js + Tailwind + Neon)

Similar Threads

Similar Threads

Similar Threads