fullstack-ai-nextjs - GitLite

KO | EN

gitlite — search

#typescript #llm #golang #machine-learning #linux #windows #kubernetes #awesome-list #vue #security #pytorch #mcp #ios #openai

fullstack-ai-nextjs

(★ 207)

No description available.

파일 탐색기

최종 버전 다운로드 (.zip)

- - layout.tsx
- - page.tsx
- favicon.ico
- globals.css
- layout.tsx
- page.tsx
- Editor.tsx
- EntryCard.tsx
- HistoryChart.tsx
- NewEntry.tsx
- Question.tsx
- Spinner.tsx
- schema.prisma
- next.svg
- vercel.svg
- home.test.tsx
- actions.ts
- ai.ts
- api.ts
- auth.ts
- db.ts
.eslintrc.json
.gitignore
.prettierrc
middleware.ts
next.config.js
package-lock.json
package.json
postcss.config.js
README.md
setupTests.ts
tailwind.config.js
tsconfig.json
tsconfig.node.json
vite.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Hendrixer/fullstack-ai-nextjs

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd fullstack-ai-nextjs

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install --legacy-peer-deps

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run dev # tests your installation an opens the basic app at http://localhost:3000

개발/실행 서버를 켭니다.

npm i @clerk/nextjs

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Frontend Masters](https://static.frontendmasters.com/assets/brand/logos/full.png)][fem]

This is a companion repo for the [Build an AI Powered Fullstack App with Next.js, v3][course] course on [Frontend Masters][fem]. This application is built from scratch throughout the course. The `main` branch contains a final version of the application similar to the one built in the course. The other branches in the repo are code checkpoints which can be used as a starting point for specific lessons.

## Getting Started

The [course][course] covers the full process of building and deploying the application. The steps below summarize a few of the key requirements.

### Creating the Initial Project

> [!IMPORTANT]  
> Some dependencies used later in the course have peer dependency issues can can no longer be installed through the CLI. We recommend using the `start` branch to ensure you have the correct versions of all dependencies

```bash
git clone https://github.com/Hendrixer/fullstack-ai-nextjs.git
cd fullstack-ai-nextjs
git checkout start
npm install --legacy-peer-deps
npm run dev # tests your installation an opens the basic app at http://localhost:3000
```

### Install Clerk

Clerk is the third-party authentication provider for the application

```bash
npm i @clerk/nextjs
```

**Add Clerk secrets to .env.local**

```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXX
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/journal
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/new-user
```

> [!IMPORTANT]  
> PlanetScale has removed their free tier offering. [More info](https://planetscale.com/docs/concepts/planetscale-plans). You can still complete the course with a paid PlanetScale plan. See below for alternatives.

### PlanetScale Serverless SQL Database

1. Create a [PlanetScale Database](https://planetscale.com/)
2. Install [pscale CLI](https://github.com/planetscale/cli#installation)
3. Use the CLI to connect to the DB: `pscale auth login`
4. Create a `dev` database branch: `pscale branch create mood dev`
5. Start the connection: `pscale connect mood dev --port 3309`

### PlanetScale Alternatives

There are several serverless database alternatives to PlanetScale include [Neon](https://neon.tech/docs/guides/prisma), [Turso](https://docs.turso.tech/sdk/ts/orm/prisma), [Supabase](https://supabase.com/partners/integrations/prisma), and [CockroachDB](https://www.cockroachlabs.com/docs/v23.2/build-a-nodejs-app-with-cockroachdb-prisma).

Neon has a branching feature similar to PlanetScale that will be in closer alignment to this course. Follow the [Prima + Neon setup guide](https://neon.tech/docs/guides/prisma).

### Prisma ORM

1. Install Prisma Client: `npm i @prisma/client`
2. Install Prisma as dev dependency: `npm i prisma --save-dev`
3. Initialize Prisma: `npx prisma init`

### OpenAI API Account Setup

1. Create an [openai.com](https://openai.com/) account
2. Select the `API` App.
3. Create an [API Key](https://platform.openai.com/account/api-keys)
4. Copy/Paste the key into your into `.env.local` using the variable `OPENAI_API_KEY`

[fem]: https://frontendmasters.com
[course]: https://frontendmasters.com/courses/fullstack-app-next-v3/