nextjs5 [Next.js] Layout으로 공통 화면 구성하기 Web app을 개발하다보면 네비게이션바나 footer와 같이 공통적으로 사용할 컴포넌트가 필요한 경우가 자주 발생합니다. 이것을 매번 일일이 해주려면 여간 귀찮은 일이 아니죠. Next.js에서는 layout이라는 기능으로 이것을 지원하고 있습니다. Create Project create-next-app을 사용해서 프로젝트를 생성합니다. 그리고 기본 페이지 구성을 위해 다음과 같이 넣어줍니다. // app/page.tsx export default function Home() { return ( Home ); } // app/menu/[id]/page.tsx export default function Menu({ params }: { params: { id: string } }) { return ( M.. 2024. 2. 17. [Next.js] Routing using App Router 이번에는 next.js의 routing에 대해 소개를 해 드리려고 합니다. 공식 페이지를 보면 2가지 방식의 routing을 소개하고 있습니다. 이전에 사용되던 pages router보다 좀 더 편리하고 직관적으로 사용할 수 있어서 app router가 좀 더 맘에 들더라고요. create-next-app tool을 사용하여 프로젝트를 생성할 때, 이 기능 사용 여부를 설정할 수 있어요. 무려 recommended이죠? 😄 Page Files 이 방식의 핵심은 바로 page 파일입니다. 다시 말해, page 파일이 존재하는 경로가 바로 routing 경로가 됩니다. app 폴더 아래에 blog 폴더를 생성 후, page.tsx 파일을 만들어 봅니다. // app/blog/page.tsx export de.. 2024. 2. 4. [Tauri] Getting Started with Next.js 데스크톱 앱을 next.js로 만들어 볼까 하는 데, Tauri도 어느정도 더 발전했을 것 같아서 시도를 해보았습니다. ^^ 우선 기본적인 프로젝트 생성 방법을 살펴보겠습니다. 기존 포스팅들도 있고 하니 기본적인 개발환경 구성은 되어 있다고 생각하겠습니다. ^^;; 제가 사용한 rustc 버전은 1.75.0입니다. Create Frontend Project 먼저, frontend로 사용할 Next.js 프로젝트를 생성해 줍니다. $ npx create-next-app@latest --use-npm 원하는 정보를 입력해 줍니다. Configure Frontend 생성된 폴더 내에서 tsconfig.json 파일을 찾아 다음과 같이 설정을 추가해 줍니다. "exclude": [ "node_modules", .. 2024. 1. 25. [Next.js] Getting Started with VSCode 이번에는 Next.js의 개발 환경 설정을 알아보겠습니다. Create Project npx를 사용하여 최신 버전으로 프로젝트를 생성하겠습니다. $ npx create-next-app@latest --ts example Typescript를 사용하기 위하여 --ts옵션을 주었고, 저는 프로젝트 이름을 example로 했는데 이부분에 원하는 이름을 적어 주면 됩니다. 현재 (23/09/08) 기준으로 최신 버전은 v13.4.19 네요. 몇 가지 옵션을 설정해주시면 프로젝트가 생성됩니다. 참고하셔서 원하는 옵션을 선택하시면 되요. Install Extension for VSCode 먼저 linting 도구인 ESLint를 설치해 줍니다. 기본적으로 설정은 프로젝트 생성 시 되어 있으므로 변경이 필요하시면 수.. 2023. 9. 8. [Next] Getting Started (with TypeScript, TailwindCSS) Next is an awesome framework. The homepage represents "The React Framework for Production" as its motto. It supports TypeScript with React. In addition, it also supports easy SSR, zero-configuration, SEO friendly, and routing based on the folder structure. Now, let's start !! Create a Project $ npx create-next-app my_next_app --example with-typescript $ cd my_next_app $ yarn dev Now, access our .. 2021. 1. 9. 이전 1 다음
