整自己blog #4 Next.js

Programming

導覽

正文

setup完strapi就到next.js

先開visual studio 然後run

npx create-next-app@latest

nextjs 13 有app router 同page router
今次用新野 app router
另外會問用唔用tailwind 同typescript
基本上都係用硬

之後

cd blog npm run dev

如無意外打開localhost:3000 就會見到intro page
之後就可以正式開始

project folder 入面會有個app folder
nextjs 其中一個賣點就係base on folder structure既 router功能舉個例如果網址係localhost:3000/
佢就會自動redirect 去root ,即係 app呢個folder
如似上面呢張圖咁
app/Home 同 app/Post分別會對應返 localhost:3000/Home 同 localhost:3000/Post

by default 一開始app folder 會有layout.tsx 同page.tsx
layout tsx 就係所有呢個folder入面既children 都會跟從呢個file入面既野
例如去set metadata 去set header footer 等等之類就好有用
上面張圖就define左成個網既字體係用google font 既inter啦

只於page.tsx就係講呢個page 要包括d咩就係呢堆code 會變左上面個intro page

另外next 既router 對比react仲有一樣好好用既野
就係dynamic route
直接用例子會快d表達到
例如我開一個folder叫[slug]放係app/Post入面
即係app/Post/[slug]
咁server會自動intrepret 任何 localhost:3000/Post/xxx 既url refer去app/Post/[slug]
而server亦會自動認到slug = "xxx" 方便development ＞呢個page 既slug = "build-blog-4"

之前亦都講過nextjs係front 同backend一體化左
要寫backend既話亦都好簡單
就係app入面開個api既folder加一個route.tsx 同frontend好相似唯一唔同既係route.tsx需要define返會用到邊幾個

import { NextResponse } from "next/server";
export async function POST(request: Request) {
  return NextResponse.json({});
}

留意返個POST
只要咁樣define左POST 呢個function
nextjs就會自動識intrepret 任何direct去呢條url 既post request
get 同埋put亦都係一樣玩法

呢篇好快咁講左我會用到既核心功能
下篇就會go through成個blog既frame

Back to Programming