본문 바로가기
Next.js

[Next.js] Next.js 자주 사용하는 기초 문법 15가지

by 메이플 🍁 2022. 9. 14.

명령어 (yarn)

설치

자바스크립트로 설치

yarn create next-app

타입스크립트로 설치

yarn create next-app --typescript

개발환경 실행

yarn run dev

배포 파일 생성

→ build된 파일은 .next 폴더 안에 위치

yarn run build

Production Mode로 실행

build한 프로젝트 실행

yarn start

 

문법

1. 기본 폴더 구성

  • .next: 빌드된 파일이 .next 폴더 안으로 들어간다
  • node_modules
  • pages: pages 폴더 안에 있는 파일은 자동으로 라우팅이 되서 url로 접근이 가능하다
    • _app.js
    • index.js
  • public
  • styles: css module 방식을 기본적으로 사용
    • global.css
    • Home.module.css
  • next.config.js

 

2. 컴포넌트 만들기

  • pages 폴더 안에 있는 파일은 소문자, components 폴더 안에 있는 파일은 대문자로 시작한다
  • 컴포넌트 이름은 반드시 대문자 사용 (소문자 사용시 useRouter 사용 불가)

JavaScript로 만든 컴포넌트

const Home = () => {
  return {/* code */}  
}

export default Home

TypeScriprt로 만든 컴포넌트

  • 타입스크립트로 만든 컴포넌트는 return 값이 필요하다
  • 리턴할 코드가 없으면 return null 또는 return <></>를 해준다

참고링크

https://nextjs.org/learn/excel/typescript/setup

What does NextPage in Next.js do?

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return {/* code */}  
}

export default Home

 

3. 라우터 설정

  • pages 폴더 안에 있는 파일은 자동으로 라우팅이 되서 url로 접근이 가능하다

출처: 생활코딩

 

4. 동적 파라미터 가져오기

  • pages > sub > [id].jsx 파일을 만들면 해당 페이지를 pages/sub/id이름 으로 접근할 수 있다
  • Next.js에 라우터 기능이 내장되어 있으므로 next/router에서 useRouter 함수를 import해 사용한다
  • 동적 파라미터는 useRouter에서 리턴한 router.query.동적파라미터로 접근이 가능하다
  • id에는 파라미터 값이 문자열로 담긴다
import { useRouter } from 'next/router'

const AboutDetail = () => {
  const router = useRouter()
  const id = Number(router.query.id)

  return {/* code */}
}

export default AboutDetail

 

5. 환경변수 설정하기

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

  • 환경변수 설정 후 개발 환경 껐다가 다시 켜야만 작동이 시작된다
  • 브라우저에서 접근이 가능한 환경변수를 만드려면 변수명 앞에 NEXT_PUBLIC 을 추가해준다

.env

가장 최상위 폴더에 해당 파일을 생성한다

API_URL=http://localhost:3000/

접근: process.env.변수명

useEffect(() => {
  fetch(process.env.API_URL + 'api/hello')
})

 

6. HTML <head> 태그 안에 들어가는 태그(title, meta 등)를 Head 컴포넌트 안에 작성해준다

HTML

<head>
  <title>Create Next App</title>
  <meta name="description" content="Generated by create next app" />
  <link rel="icon" href="/favicon.ico" /
</head>

Next.js

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </>
  )
}

 

7.  페이지 head을 커스터마이즈 해주기

  • Next.js에서는 페이지마다 하나의 HTML 파일을 가진다
  • 여러 페이지의 head 안에 정보를 컴포넌트화 해서 관리해준다

HeadInfo 컴포넌트

import Head from 'next/head'

export default function HeadInfo({ title, keyword, contents }) {
  return (
    <Head>
      <title>{title}</title>
      <meta keyword={keyword} />
      <meta contents={contents} />
    </Head>
  )
}

HeadInfo.defaultProps = {
  title: 'My Blog',
  keyword: 'Blog powered by Next js',
  contents: 'practice Next js',
}

photo 페이지

각 페이지에서 head를 만들때 HeadIfo에 필요한 props를 넘겨주며 head를 생성해준다

import Image from 'next/image'
import HeadInfo from '../components/HeadInfo'

export default function photo({ photos }) {
  return (
    <div>
      <HeadInfo title='My Blog Photos' />
    </div>
  )
}

 

8. Nav 만들기

components > Layout.js, Nav.js 생성

Layout

import Nav from './Nav'

export default function Layout({ children }) {
  return (
    <>
      <Nav />
      {/* pages 폴더 안에 있는 모든 페이지 컴포넌트가 출력될 수 있도록 만든다  */}
      <div>{children}</div>
    </>
  )
}

Nav

import Link from 'next/link'

export default function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <Link href='/'></Link>
        </li>
        <li>
          <Link href='/photos'>photos</Link>
        </li>
      </ul>
    </nav>
  )
}

_app.js

import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {
  return (
    // Layout으로 Component를 감싸준다
    <Layout>
      {/* 실질적인 컨텐츠 */}
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

 

9. 스타일 적용

  • Next.js는 CSS in JS 기법을 기본적으로 지원한다
  • 컴포넌트마다 스타일 파일을 만들어 관리해준다
  • 글로벌 스타일: styles > global.css
  • 컴포넌트 스타일: styles > Home.module.css 컴포넌트명.module.css
import Link from 'next/link'
import navStyles from '../styles/Nav.module.css'

export default function Nav() {
  return (
    <nav className={navStyles.nav}>
      {/* code */}
    </nav>
  )
}

 

10. img 태그 대신 Image 컴포넌트 사용

https://nextjs.org/docs/basic-features/image-optimization

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <Image
        src={profilePic}
        alt="Picture of the author"
        width={500}
        height={500}
      />
    </>
  )
}

 

11. 페이지 이동 링크 생성시 Link href에 주소 입력

  • 일반 라우터는 to에 주소를 입력하지만 Next.js에서는 href에 주소를 입력한다
  • a태그 없이 Link 컴포넌트만 단독사용이 가능하다
import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

 

12. 외부 url 사용시 next.config.js에 해당 주소 등록

추가할 코드

images: {
  domains: ["사용할 주소"]
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
	images: {
	  domains: ["사용할 주소"]
	}
}

module.exports = nextConfig

 

13. getServerSidePropsSSR) vs getStaticProps(SSG)

SSR: Server Side Rendering

SSG: Static Site Generation

SSR SSG 공통점

→ 서버에서 HTML을 보내준다

SSR SSG 차이점

→ 언제 HTML을 만들어주는가

  • SSR: 클라이언트 요청시 서버에 있는 데이터를 가져와 HTML을 만든다
  • SSG: 빌드시 서버에 있는 데이터를 가져와 HTML을 만든다

SSR

  • 서버에서 데이터가 업데이트되면 업데이트된 데이터가 사이트에 바로 반영된다
  • 클라이언트(웹브라우저) 요청시 서버에서 즉시 데이터를 포함한 HTML을 만들어서 전송한다
  • 응답 데이터가 자주 바뀌어서 미리 만들어두기 어려운 페이지에 적합하다

SSG

  • 서버에서 데이터가 업데이트되어도 업데이트된 데이터가 사이트에 바로 반영되지 않는다
  • 프로젝트 빌드시에 (엔드 프로덕트를 만들때) 서버에 있는 데이터를 가져와 페이지를 구성한다
  • 페이지를 서버에 미리 만들어둔 뒤에 요청시에 해당 페이지를 응답한다
  • 미리 다 만들어 두니깐 바뀔일이 거의 없는 페이지에 적합하다

Home

export default function Home({ posts }) {
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      <Image
        src='https://via.placeholder.com/300.png/09f/fff'
        width={100}
        height={100}
        alt='test'
      />
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

getServerSideProps

export const getServerSideProps = async () => {
  const res = await fetch(
    https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
  )
  const posts = await res.json()

  // Home 컴포넌트에 fetch한 데이터 props 형태로 전달해주기
  // Home({ posts })...
  return {
    props: {
      posts // posts: posts 생략
    }
  }
}

getStaticProps

export const getStaticProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
  )
  const posts = await res.json()

  // Home 컴포넌트에 fetch한 데이터 props 형태로 전달해주기
  // Home({ posts })...
  return {
    props: {
      posts
    }
    // revalidate: 시간(초)
    // SSG 방식을 사용하고도 서버에 있는 데이터가 업데이트되었을때 연동이 가능하도록 만들어주는 방법
    // 처음 접속이 일어난 후에 지정한 시간 뒤에 언제든 접속이 일어나면 새롭게 서버에서 데이터를 받아와 사이트를 업데이트해준다
    revalidate: 20
  }
}

 

14. SSG dynamic parameter 사용시 주의점

https://nextjs.org/docs/messages/invalid-getstaticpaths-value

// SSG 사용해서 서버에서 데이터 가져오기
export const getStaticProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/photos?_start=0&_end=10`
  )
  const photo = await res.json()
  return {
    props: {
      photo,
    },
  }
}

// 사용할 dynamic parameter 등록해주기
export const getStaticPaths = async () => {
  return {
    paths: [
      {
        params: { id: '1' },
      },
      {
        params: { id: '2' },
      },
      {
        params: { id: '3' },
      },
    ],
    fallback: false,
  }
}

 

15. 배포

https://vercel.com/new

  • 깃허브에 연동된 프로젝트를 선택해 배포
  • 넷리파이와 유사
  • 프로젝트명 (프로젝트의 폴더명)이 도메인이름으로 지정되므로 처음에 세팅할때 유의할것
    • 내프로젝트명.vercel.app

'Next.js' 카테고리의 다른 글

[Next.js] Next.js란? (리액트 단점, CSR, SSR 설명)  (0) 2022.09.14

관련글

댓글

티스토리툴바