행복을 담는 블로그

[Next.js] Next.js 프로젝트 시작하기 본문

FrontEnd/Next.js

[Next.js] Next.js 프로젝트 시작하기

hyun0zin 2024. 3. 11. 11:33

3. Routing

Next.js 프로젝트 시작하기

Next.js 초기 설정 화면

1) Next.js 프레임워크 설치하기

npx create-next-app@latest

yarn create-next-app@latest

▶️ 프레임워크답게 필요한 라이브러리를 한 번에 설치 할 수 있다!

2) 폴더 구조 살펴보기

: .eslintrc.json, next.config.mjs,package.json, tailwind.config.ts, tsconfig.json 등 필요한 파일일 모두 생성된 것을 확인 할 수 있다.

▶️ src 폴더 > app 폴더 안에 layout.tsx, page.tsx 파일이 존재한다.

✅ layout.tsx 파일
: Metadata를 가지고 있는 파일로, title을 변경할 수 있으며, RootLayout을 가지고 있다.

  • RootLayout을 통해 Header와 같은 모든 컴포넌트에서 설정하고자하는 컴포넌트를 고정시킬 수 있다.
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

✅ page.tsx
: main Home 페이지를 나타내는 페이지이다.

export default function Home() {
  return <div>Home 페이지입니다. </div>;
}

dev -> build -> start
변경사항이 있으면 변경사항을 build하고 start를 해줘야한다.

  • yarn build : versel에서 하는 build 과정을 yarn build하면 알아서 해준다.
  • yarn start : 실행할 수 있다. port 넘버가 프로덕션 레벨에서 정해진다

✅ Router-dom-tree가 중요
낙엽은 더이상 노드가 없다.

URL Segment : 슬래시 뒤에 나오는 부분을 segment
URL Path : domain 뒤에 나오는 모든 부분을 path

RootLayout : DOM tree 최상단에 있는 layout

page.tsx가 굉장히 중요하다.

app 폴더 > test 폴더 > page.tsx : TestPage로 컴포넌트 이름 만들기
-> 이렇게 하면, localhost:3000/test로 접근하면 해당 page.tsx로 접근 가능!

  • static routing : 정해진 라우팅을 한다.
    중첩된 라우팅 x -> 폴더 단위 라우팅
  • dynamic routing : 폴더 이름을 대괄호로 감싸보자
    app 폴더 > test 폴더 > [id](대괄호로 감싸자) 폴더 > page.tsx 설정
    => params를 router에서 직접 넘겨주지 않고, [id] 폴더를 만들어 넘겨주자
  • routing groug : 소괄호로 감싸면 admin 폴더는 router에서 접근불가 = routing 그룹이 아니다.
    app 폴더 > (admin) 폴더 > about/ about2 폴더를 만들면,
    localhost:3000/about으로 바로 접근 가능하다.
  • 중첩 라우터 대신 layout 사용
    app > (admin) > about / about2 / sample 폴더 > page.tsx
    : admin 폴더 안에 있는 about / about2 / sample 이 3개의 페이지는 모두 admin layout의 영향을 받고 싶으면, admin 폴더 안에 layout을 만들어준다.

layout : useEffect가 리렌더링이 안 된다
template : useEffect가 계속 리렌더링이 된다. = 새로고침이 계속 되는 효과가 난다.

그럼 template 왜 필요해? 페이지간 전환 시 애니메이션을 계속 사용하고 싶을 때, template을 사용. layout으로 적용하면 최초 1회만 애니메이션 일어나고 이후는 안 일어남.

next.js => 파일 이름이 layout이냐 template이냐에 따라 기능이 결정된다.

error가 났을 때, : 404 Not Found 컴포넌트 만들어주자
app > not-found.tsx 만들기
: 없는 경로로 접속했을 때, 내가 만든 not-found 페이지가 뜬다.

Metadata

: index.html 파일을 대체하는 부분이 metadata 부분이다.

원하는 page나 layout 어디든지 metadata를 넣을 수 있다.

SEO 높일 수 있는 방법

useRouter(next/Navigate로 반드시 설정)

: Link로 설정 / 또는 onClick에서 바로 router.push("/")로 이동

const router = useRouter()
onclick = {()=>{
    router.push("/");
}}

tailwindcss

: 홈페이지에서 원하는 style을 찾자

<nav className="p-4 m-4">

=> tailwindcss에 저장되어 있는 css 속성의 className을 그대로 복사해서 붙여넣기!
엄청 쉽게 적용 가능하다

flex : 정말 많이 사용할 예정!!

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

[Next.js] Font 적용하기 / localFont( ) 적용하기  (0) 2024.06.20
[Next.js] Rendering 패턴  (0) 2024.03.11
[Next.js] Next.js에 대해서 알아보자🧐  (0) 2024.03.11
'FrontEnd/Next.js' Related Articles more