교육후 개인공부61 [Next.js] 서버기능 만들려면 전체 폴더 위치에다가 pages폴더 만들고 그 안에 api폴더 만들고 그 안에 test.js같은 파일 만들면 된다. 이런식으로 만들자!! 일단 get요청을 테스트 해보자 export default function handler() { console.log(123); } 코드를 이렇게 입력하고 인터넷주소창에 localhost:3000/api/test 이렇게 입력해보자! 몹시 성공적 export default function handler(req, res) { console.log(123); return res.status(200).json("안녕"); } 이렇게하면 응답까지 해준다!!!! post 서버기능 만들려면 form을 이용하면 된다!!! export default function Write() { .. 2024. 2. 20. [Next.js] useRouter 페이지 이동하는 방법으로 Link말고 useRouter를 쓰는방법도 있다 useRouter는 client component에서 사용할수있다. import { useRouter } from "next/navigation"; let router = useRouter(); 리액트에서 navigate쓰던거랑 방법이 비슷한것 같다. "use client"; import { useRouter } from "next/navigation"; export default function DetailLink() { let router = useRouter(); return ( { router.push("/list"); }} > 버튼 ); } router.back() : 뒤로가기 router.forward() : 앞으로가기 .. 2024. 2. 20. [Next.js] dynamic route와 id맞추기(상세페이지설정) 상세페이지에서 dynamic route에 id맞추는 방법이다. 일단 mongoDB에서 게시물 1개만 가져오려면 findOne을 사용하면 된다. const result = await db.collection("post").findOne({ title: "제목3" }); const result = await db .collection("post") .findOne({ _id: new ObjectId('65699478e619dc02d6af6819') }); 이렇게하면 저 id에 맞는 게시물을 찾아준다. 하지만 id값을 우린 항상 알수있는게 아니니까 props를 이용해보자! export default async function Detail(props) { const client = await connectDB;.. 2024. 2. 20. mongoDb 연결하기 //util폴더의 database.js파일 import { MongoClient } from "mongodb"; const url = "mongodb+srv://mongzii228:@cluster0.m8aww3r.mongodb.net/?retryWrites=true&w=majority"; const options = { useNewUrlParser: true }; let connectDB; if (process.env.NODE_ENV === "development") { if (!global._mongo) { global._mongo = new MongoClient(url, options).connect(); } connectDB = global._mongo; } else { connectDB = new.. 2024. 2. 20. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음
