fullstack-nextjs-app-template

(★ 236)

A full-stack sample web application based on Next.js that creates a simple whole-website architecture

파일 탐색기

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

- - [...videoDecrypt].ts
  - extract-file.ts
  - navigation.ts
  - passkey.ts
  - post-detail.ts
  - posts.ts
  - video-key.ts
  - video-stream.generic.ts
  - video-stream.ts
- - index.html.ServerSide.tsx
  - index.html.tsx
- - [id].tsx
- - [page].tsx
- - [id].tsx
- 404.tsx
- _app.tsx
- _document.tsx
- about.html.tsx
- index.tsx
- md-render.html.tsx
- nested-routes.html.tsx
- posts.html.tsx
- request.ajax.html.tsx
- sign-in.html.tsx
- - ClientPage.tsx
  - page.tsx
- - navigation-events.tsx
- - ClientPage.tsx
  - page.tsx
- - ClientPage.tsx
  - page.tsx
- - ClientPage.tsx
  - page.tsx
- - ClientPage.tsx
  - page.tsx
- - ClientPage.tsx
  - page.tsx
- ClientPage.tsx
- ClientPage404.tsx
- layout.tsx
- not-found.tsx
- page.tsx
- ProviderLayout.tsx
- - logger.js
- - cache.js
  - parse-image.js
  - signal.js
  - ws.js
- - cache-delete-static-assets-spec.js
  - cache-delete-static-assets.js
  - cache-static-assets.js
  - example.js
  - parse-htmlcssjs.js
- - diff-dep.js
  - obj-detection.js
  - remaining-elements.js
  - version-computed.js
- .dockerignore
- Dockerfile
- package-lock.json
- package.json
- server-auth.js
- server-backup.js
- server-files.js
- server-logger.js
- server-passkey.js
- server-php.js
- server-socket.js
- server-upload.js
- __.zip
- - demo.md
- - authenticate.php
  - curd-data-init.php
  - curd.php
  - generate-jwt.php
  - navigation.php
  - sessions-create.php
- - authenticate.json
  - curd-data-init.json
  - curd.json
  - navigation.json
  - sessions-create.json
- - generate-translation-file.js
- config-rootdir-of-publishing-source.js
- download-remote-files-from-API.js
- generate-css-files.js
- paths-static-page.js
- publishing-to-platform.js
- publishing-to-platform[ready].js
- server-generated-static-site.js
- - apiUrls.js
  - jwt.js
  - request.js
- - JWTAuthContext.js
- - app.json
  - page.json
- - button.ts
  - custom.window.ts
- - createStore.js
- - globals.scss
- - CoreUtils.d.ts
  - CoreUtils.js
  - UtilsHook.js
- global.d.ts
.dockerignore
.eslintrc.json
.gitattributes
.gitignore
.nojekyll
.npmignore
.vercelignore
CHANGELOG.md
docker-compose.yml
Dockerfile
ecosystem.config.js
LICENSE
middleware.ts
next.config.js
package-lock.json
package.json
README.md
server.js
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/xizon/fullstack-nextjs-app-template

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

cd fullstack-nextjs-app-template

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

2. Docker

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.

├── docker-compose.yml

compose 설정 파일에 정의된 서비스들을 대상으로 명령을 실행합니다.

$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

compose 설정 파일에 정의된 서비스들을 대상으로 명령을 실행합니다.

$ sudo docker run hello-world

빌드된 이미지를 실제 컨테이너로 실행합니다.

$ docker build -t fullstack-nextjs-app-template:v1 .

Dockerfile을 기반으로 실행 가능한 이미지를 빌드합니다.

> $ docker pull node:22.20.0-bookworm-slim

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

✅ 터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.

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

3. Node.js

쉬움

사전 준비물

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

$ npm install

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

$ npm i next@latest react@latest react-dom@latest eslint-config-next@latest

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

$ npm run dev & npm run action:phpserver

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

$ npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

$ npm run build:static

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

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

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