Starter Template으로 시작하는 Next.js; 1. GitHub에 복사하기

Starter Template으로 시작하는 Next.js

1. GitHub에 복사하기

2. 실행하기

0. Next.js 란

리액트(React)로 화면 프로그램을 개발하고 Node.js와 Express를 사용하여 별도의 프로젝트를 만들어 개발하는 것은 프론트엔드 개발자와 백엔드 개발자가 분리되어 있는 회사에서는 좋은 선택일 수 있지만, 적은 인원으로 부트스트래핑 하는 스타트업에서 Next.js처럼 프론트엔드와 백엔드를 동시에 개발할 수 있는 환경이 더 좋은 선택일 수 있다.

 

Next.js는 프론트엔드와 백엔드를 하나의 프레임워크 상에서 동시에 개발할 수 있는 풀스택 프레임워크이다. 그동안 Next.js를 써보면서 느꼈던 장점을 몇 가지만 보면,

 

• SSR (Server-side rendering)을 제공한다.

React는 기본적으로 CSR (Client-side rendering)이기 때문에 웹 브라우저에서 자바스크립트가 실행되면서 화면을 동적으로 만들어 낸다. 그래서 React으로 만들어진 페이지의 정보를 검색엔진이 가져가기 어렵게 만든다. 정보의 노출을 꺼리는 회사 내부 시스템이라면 모든 페이지를 동적으로 만들어 내는 SPA(Single Page Application)가 좋겠지만, 쇼핑몰이나 블로그처럼 검색엔진에 내용을 잘 노출시켜야 하는 경우 웹 서버에서 웹 브라우저로 페이지의 내용을 만들어서 전달하는 SSR이 더 좋을 것이다. Next.js를 사용하면 SSR을 자연스럽게 구현할 수 있다.

 

• 편리한 file-system based routing을 제공한다.

대부분의 프레임워크는 라우팅(URL을 보고 어떤 페이지/프로그램을 실행해야 하는지 결정하는 것)을 프로그램을 개발할 때 정의해야 한다. Express는 app오브젝트에 라우트 핸들러를 등록해서 처리하고, NestJS는 Java의 Spring처럼 Controller에 Annotation으로 라우팅 핸들러를 지정한다. 이렇게 코드 안에 라우팅 정보가 있으면 코드를 살펴보기 전에는 요청된 URL이 어디로 분기되는지 확인하기 힘들다. Next.js는 라우팅(URL을 분기)할 때 경로를 파일 시스템 상의 경로와 파일이름으로 만들 수 있는 방법을 제공하기 때문에 URL을 보고 어떤 프로그램 파일이 실행될지 쉽게 알 수 있다.

 

• code splitting이 자동으로 된다.

Next.js의 또 다른 큰 장점 중 하나가 내가 만든 프로그램의 어느 부분이 서버에서 실행되고 어느 부분이 웹 브라우저에서 실행될지를 판단해서 프로그램을 자동으로 분리하는 code splitting작업을 한다. 하지만 이 부분은 개발할 때, 특히 디버깅을 할 때, 지금 보고 있는 코드가 서버에서 실행되는지, 웹 브라우저에서 실행되는지 잘 판단하지 못해 어려움을 겪게 만들기도 한다. 예를 들면 browser에서만 돌아가는 함수를  넣어 만든 내 프로그램이 code splitting 되면서 서버 프로그램으로 나누어 들어가면 실행되지 않는다는 것이 처음에는 눈에 들어오지 않는다.

 

• api routing를 쉽게 만들 수 있다.

웹 브라우즈에 페이지를 전달하는 부분과는 별개로 SSR, CSR을 하는 프로그램이 사용하는 API를 page/api와 같이 폴더 이름을 api로 지정하는 것 만으로 간단히 구성할 수 있다. 이 api들은 /api/*로 맵핑이 되기 때문에 서버 프로그램뿐 아니라 웹 브라우저와 다른 외부 프로그램에서도 접근할 수 있는 API를 화면을 개발하는 코드와 함께 같은 프레임워크에서 개발할 수 있어 편리하다.

 

이 밖에도 최근 버전에서 웹 페이지 로딩 성능을 향상을 향상시킬 수 있는 <Image> Tag를 통한 이미지 최적화나  Built-in CSS기능 등 많은 좋은 이점을 가지고 있어 MVP를 개발할 때 Top Pick으로 꼽히고 있다.

1. Starter Templates으로 개발 시작하기

Next.js를 더욱 잘 활용할 수 있는 방법 중 하나가 무료로 제공되는 Starter Templates를 이용하는 것이다. 아래 웹 페이지에 가면 개발을 시작할 때 도움이 되는 수십 가지의 다양한 Starter Templates를 제공하고 있다.

Next.js Starter Templates & Themes | Vercel – Vercel

이번에는 그중에서 관리화면을 만들 때 유용하게 사용할 수 있는 "Admin Dashboard Template"를 사용해서 프로젝트를 시작해 보기로 했다.

 

• Starter Templates 페이지에서 "Admin Dashboard Template"을 선택한다.

 

• 원하는 Template를 사용하기 위해 Vercel호스팅 서비스로 Deploy 하는 절차를 시작한다.

Admin Dashboard Template 상세 페이지로 들어가면 Template에 대한 기술적인 내용이 설명되어 있다.

 

이 글을 만들 당시의 내용을 보면 Admin Dashboard Template이

• Next.js 14 버전을 지원하고,
• TypeScript으로 만들어져 있으며,
• NextAuth를 사용해서 로그인을 하고.
• PostgreSQL를 backend DB로 사용하고,
• Tailwind CSS를 사용해서 화면 디자인을 입히고 있는 것을 알 수 있다.

Starter Template는 Vercel에서 제공하는 호스팅 서비스에 맞춰 개발되어 있고, 사용하기 위해서 Vercel의 호스팅 서비스에 Deploy 하는 절차를 밝아야 소스코드를 얻을 수 있다.

 

Vercel의 무료 계정을 사용해 본 느낌은

• 소스코드를 GitHub에 올리면 별다른 절차 없이 CI/CD 절차를 수행해 주기 때문에 좋았지만,
• 무료 계정이어서 그런지, 서버가 미국에 있어서 그런지 속도는 비교적 빠르지 않았다고 느꼈기에

이번에는 내 컴퓨터에 배포하고 개발할 수 있도록 설정해 보기로 했다.

 

 

• Deploy를 실행하면 Repository 서비스를 선택하고 Template의 소스를 복사하는 절차를 수행할 수 있다.

먼저 Repository서비스로 GitHub을 선택하고 하고 나면 GitHub에 로그인하는 팝업이 나타나고

GitHub에 로그인을 하면 Vercel App을 설치하는 팝업으로 바뀐다.

 

GitHub에 App까지 설치하고 나면 다음과 같이 GitHub의 Repository이름을 지정할 수 있도록 화면이 바뀌고,

 

원하는 이름을 넣고 "Create"를 누르면 내 GitHub에 Admin Dashboard Template 프로그램 소스가 복사된다.