Nav

NextJS

Next JS

서버와 클라이언트 를 함께 구현할 수 있는 올인원 솔루션

Next JS 설정

                        
npx create-next-app@latest

npm install styled-components@5.3.5 
npm install axios
npm install mongoose

                    
                      {
                        "name": "projectname",
                        "version": "0.1.0",
                        "private": true,
                        "scripts": {
                          "dev": "next dev --port 3005",
                          "build": "next build",
                          "start": "next start",
                          "lint": "next lint"
                        },
                        "dependencies": {
                          "axios": "^1.7.2",
                          "cookies-next": "^4.2.1",
                          "jsonwebtoken": "^9.0.2",
                          "mongodb": "^6.6.1",
                          "next": "^14.2.3",
                          "react": "^18",
                          "react-dom": "^18",
                          "styled-components": "^5.3.5"
                        }
                      }

Component Props 가져오기

변수의 경우 ServerComponent -> ClientComponent 가 가능하지만, 함수의 경우 ServerComponent -> ClientComponent 가 불가능하다

                        
const ClientComponent = (props)=>{


    return(
        <>
            <div className="BodyT1">
                {props.params.Index}

            </div>
        </>
    )
}


export default Home;

UseEffect, UseState 사용법

클라이언트 컴포넌트에서만 사용 가능

                        
'use client'
import {useEffect, useState} from "react";

페이지 새로고침

잘 안되긴 하지만...

                        
import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.reload()}>
      새로고침
    </button>
  )
}

리디렉션

ServerComponent

                    
'use server'

import {redirect} from "next/navigation"

async function ServerComponent (){
  redirect('/')
}

ClientComponent

                    
'use client'

import {useRouter} from "next/navigation";

function ClientComponent (){

  let router = useRouter();

  router.push('/')

}

컴포넌트 내용 가져오기

                        
const CompName = ({children})=>{
	return(
		<>
			{children} // 이게 태그 안의 내용이다. innerHTML 같은거
		</>
	)

}

export default CompName

next js 15.2.4 버전 초기 페이지

                  
import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <Image
          className={styles.logo}
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />
        <ol>
          <li>
            Get started by editing <code>src/app/page.js</code>.
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>

        <div className={styles.ctas}>
          <a
            className={styles.primary}
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className={styles.logo}
              src="/vercel.svg"
              alt="Vercel logomark"
              width={20}
              height={20}
            />
            Deploy now
          </a>
          <a
            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
            className={styles.secondary}
          >
            Read our docs
          </a>
        </div>
      </main>
      <footer className={styles.footer}>
        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/file.svg"
            alt="File icon"
            width={16}
            height={16}
          />
          Learn
        </a>
        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/window.svg"
            alt="Window icon"
            width={16}
            height={16}
          />
          Examples
        </a>
        <a
          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/globe.svg"
            alt="Globe icon"
            width={16}
            height={16}
          />
          Go to nextjs.org →
        </a>
      </footer>
    </div>
  );
}