[Next.js] React, Express.js 그리고 SSR을 한번에

npm run dev

개발환경실행

npm run build

배포 파일 생성

npm run start

서비스 시작

Next.js 는 서버까지 내장되어 있는 올인원 솔루션!

Route

/pages/index.js 기본파일

https://a.com/sub/1 == /pages/sub/[id].js

// pages/sub/[id].js

import {useRouter} from 'next/router';

export default function Sub() {
	const router = useRouter();
	const id = Number(router.query.id);

	return (
		<>
			<h1>/pages/sub/[id].js</h1>
			<p>Parameter id : {id}</p>
			<a href="/">/pages/index.js</a>
		</>
	}

API Route

→ Client Side 기술과 Server Side 기술을 모두 가지고 있는 올인원 솔루션인 Next.js 의 Server Side 기술인 API Route

https://a.com/api/1 == /pages/api/[id].js

// pages/api/[id].js

export default function handler(req, res) {
	res.status(200).json({id : req.query.id})
}

https://a.com/api/soomin123 → {”id” : “soomin123”}

Environment Variables

https://nextjs.org/docs/basic-features/environment-variables

Basic Features: Environment Variables | Next.js

// .env
NEXT_PUBLIC_API_URL=https://localhost:3000

// pages/sub/fetch

import {useEffect, useState} from 'react';

export default function Fetch() {
	const [user, setUser] = useState({name:null});

	useEffect(() => {
		fetch(process.env.NEXT_PUBLIC_API_URL+'api/hello')
			.then(type=>type/json())
			.then(result=>{
				setUser(result);
			})
	})

	return (
		<>
			<h1>/pages/sub/fetch.js</h1>
			<p>{user.name}</p>
			<a href="/>pages/index.js</a>
		</>
	)

}