🎉 DJ - Event Project

1. ➕ Config Directory

next_project_djevent

dj-events-frontend

public(static)

pages(view)

styles

next.config.js

package.json / package.lock.json

dj-events-backend

◾ Install

npx create-next-app [directory name]

Tip!

전역으로 들어가는 컴포넌트는 _app.js 에서도 컨트롤 할 수 있음.

  function MyApp({ Component, pageProps }) {
  return (
    <>
      <header>This is Header</header>
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

2 . ➕ Router

◾ React의 router 방법

리액트 같은 경우는 react-router-dom 을 사용해 Link / navigator를 통해 경로를 바꿔서 사용했다. route는 routes 안에 있어야 하며, router가 routes를 감싸고 있어야 했다.

 <BrowserRouter>
 	<Routes>
    	<Route path="/about" element={<About />} >
        <Route path="/about/:id" element={<About />} />
    </Routes>
 </BrowserRouter>
 <Link to="/about">Go to about</Link>
 <Link to="/about/1">Go to About ID</Link>

하지만, Next.js 같은 경우는 서버 편(side)에서 렌더링이 되기 때문에 router를 따로 지정하지 않아도 경로에 따라서 자동으로 router가 설정된다.

pages

index.js (Route : '/')

about
- index.js (Route : '/about')
- [slug].js (Route: '/about/:slug')

Link를 설정할 때에는 <Link href="url"></Link> 처럼 Link를 사용해서 경로를 이동한다. a 태그로 경로를 이동할 때에는 새로고침 현상이 발생한다. Link태그 안에 a 태그를 사용하면 클래스 네임을 넣고, 커스텀 할 수 있다.

   import Link from 'next/link';
   <Link href="/about" ><a>Go To About</a></Link>

◻ Link의 props 속성

href : 이동 경로 (required)

as : 브라우저 URL 표시 줄에 표시 될 경로에 대한 선택적 데코레이터.

passHref : href property를 Link 자식에게 강제로 전달하게 한다. 기본값은 false.

prefetch : 백그라운드에서 페이지를 미리 가져온다. 기본값은 true.

replace : history 스택에 새 url을 변경하는게 아니라, 현재 상태를 변경한다.
기본값은 false

scroll : 페이지 전환 후 페이지 상단으로 스크롤할지 여부. 기본값은 true.

출처 : https://crong-dev.tistory.com/50 [[번역] next/link 공식 문서 / 개발하는 크롱]

3 . ➕ Layout Component

NEXT . JS 에서는 서버에서 랜더링 되므로, 페이지가 로드 되고 그려질 때 html 페이지가 그려지기 때문에, meta태그나 title 등 head태그 또한 원하는 키워드나 타이틀을 따로 지정해주고 싶다면 페이지마다 각자 다르게 생성해줘야 한다.

이 부분을 Layout 컴포넌트를 만들어줘서 관리를 해 준다면 편하게 사용할 수 있다. title, keyword, contents 등을 파라미터로 받아 원하는 부분만 바꿔주고, children으로 하위 컴포넌트 들에 똑같이 적용하게 한다.

이 Layout컴포넌트를 생성 될 페이지로 감싸주면 Head를 따로 생성하지 않아도 된다!
(components 디렉토리를 생성해주었다.)

//components/Layout.js
import Head from 'next/head';
import styles from '../styles/Layout.module.css'
export default function Layout({title,description,keywords,children}){
	return <div className={styles.container}>
    	<Head>
        	<title>{title}</title>
            <meta name="description" content={description}  />
            <meta name="keywords" content={keyword} />
        </Head>
        <div className={styles.container}>{children}</div>
    </div>
}
//기본 props 지정
Layout.defaultProps = {
  title: "DJ Events | Find the hottest parties",
  description: "Find the latest DJ and Musical events",
  keywords: "music,edm,dj,events,club",
};

4. ➕ Header / Footer

해더와 푸터는 계속 고정되있어야 하는 컴포넌트 이기 때문에 Layout에 import 해준다.

//components/Layout.js
export default function Layout({title,description,keywords,children}){
	return <>
    	<Head>
        	<title>{title}</title>
            <meta name="description" content={description}  />
            <meta name="keywords" content={keyword} />
        </Head>
  <header>This is Header</header>
        <div className={styles.container}>{children}</div>
    <footer>This is Footer</footer>
    </>
}

다음편에는 컴포넌트 커스텀과 구조에 대해서 포스팅 할꺼임!

Author And Source

이 문제에 관하여(NEXT.JS_2. Install & Directory), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@holicholicpop/NEXT.JS2.-Install-Directory

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

NEXT.JS_2. Install & Directory