이번 글에서는 우리의 api path 를 은닉화 할 수 있는 rewrite 에 대해 설명드리고자 합니다. next.config.js 파일에서 이전에 redirects() 를 생성했던 것과 마찬가지로, rewrites() 를 생성합니다. async rewrites() { return [ { } ] } 위에 옵션은 마찬가지로 source, destination 이 들어가게 됩니다. 이전에 프로젝트를 기본으로 만들었을 때 localhost:3000/api/hello 로 들어가게 되면 api 가 호출되는 것을 확인할 수 있었습니다. 여기는 get 방식으로 api 를 호출하여 json 의 포맷으로 가져오게 되는데, 이 부분을 은닉화해보려고 합니다. 소스가 이런 형태로 되어있다고 가정합니다. /** @type {i..
이번 글에서는 Redirect 경로를 설정하는 방법을 말씀드리고자 합니다. 루트 디렉터리에 next.config.js 에 대해 이전에 말씀드렸었는데, 이는 설정 파일로 클라이언트가 어떻게 접근하였을 때 경로를 우회하여 전송해주는 방법을 명시하고 설정하는 파일입니다. Redirect, 즉 다른 페이지로 사용자를 이동시키고 싶다면 아래와 같이 redirect() 함수를 만들어 적용하면 됩니다. /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/oldpath/:path", // 사용자가 localhost:3000/oldpath/abc 와 같..
중복되는 소스를 피하기 위해 NavBars 안의 내용을 더 나누려고 합니다. components 안의 Layout.js 파일을 생성합니다. import NavBar from "./NavBars" export default function Layout({children}) { return ( {children} ) } 그리고 이 부분을 각각 about.js 와 index.js 파일안에 넣게 됩니다. 여기서 우리의 홈페이지 타이틀을 수정하기 위해 하나 더 추가할 것이 있는데요, 바로 Head 태그입니다. Head next js 에서 기본적으로 제공하는 컴포넌트로 여기에는 우리가 html 코드에서 사용할 법한 title 태그와 meta 태그, node js 에서 helmet 이라고 불리우는 보안성 향상 모듈 ..
NavBar를 만들면서 이 태그를 모든 파일에 넣기는 다소 무리가 있습니다. 그렇기 때문에 새로운 파일을 하나 만들어줍니다. pages 폴더 내에 _app.js 를 생성하게 되면 덩달아 _app.tsx 가 이와 같이 생성이 됩니다. import '../styles/globals.css' import type { AppProps } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return } export default MyApp 이 페이지는 전역변수로 작동되는 기본 앱 페이지이며, 여기에서 사용하는 파라미터는 2개입니다. 1. Component 전역으로 사용하는 Tag를 지정해주는 녀석입니다. 이름은 마음껏 바꾸어도 되고, 필요..
NextJS의 특이점 중 하나인 jsx 를 사용하여 표현해보고자 합니다. 표현 방법은 간단하게 style 태그 내의 jsx 를 사용하면 됩니다. 위의 jsx 는 html에서 style 태그 내에 존재하는 항목처럼 사용이 가능하고 아래에 배치하여도 위의 태그 및 클래스명을 그대로 사용할 수 있습니다. import Link from 'next/link'; import { useRouter } from 'next/router'; export default function NavBars() { const router = useRouter(); console.log(router); return Home About ; } 링크: https://github.com/jyp90/nextjs-intro/commit/d05..
이번 글에서는 이전에 사용했던 NavBar를 꾸미는 작업을 진행하려 합니다. 먼저 NavBars.js 가 있는 디렉터리에 같은 레벨로 NavBars.module.css 를 생성해줍니다. 이 module.css 확장자는 nextjs 에서 사용하는 css 파일 형식으로 변수처럼 사용할 수 있습니다. 예를 들어 NavBars.module.css 안에 아래와 같은 내용이 있다고 해보겠습니다. .nav { display: flex; justify-content: space-between; background-color: tomato; } 이렇게 적용이 된 경우 자바스크립트 파일에서는 이와 같이 사용할 수 있습니다. import styles from "./NavBars.module.css" return 그리고 re..
이번 글에서는 Router를 만들어 보려고 합니다. 이전에 만들어둔 프로젝트의 루트 디렉터리에 components 폴더를 하나 만들고, 그 안에 NavBars.js 파일을 생성합니다. export default function NavBars() { return Home About ; } 그리고 about.js / index.js 에 내용을 각각 바꾸어줍니다. import NavBars from '../components/NavBars' export default function AboutPage() { return ( About ) } import NavBars from '../components/NavBars' import { useState } from 'react'; export default fu..
이전 글에서 생성한 nextjs 프로젝트는 구성도가 아래와 같이 되어 있습니다. 1. package.json, tsconfig.json 프로젝트의 전체 설정에 대한 내용이 담겨있습니다. 여기에는 프로젝트를 어떻게 실행시킬지와 어떤 dependency를 프로젝트에서 사용하고 있는지 보여줍니다. 추가적으로 package-lock.json 은 자동으로 생성됩니다. 또, tsconfig 파일은 타입스크립트 파일을 임포트하거나 타입스크립트 버전, 라이브러리 등을 설정하는 파일입니다. { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict":..