TailwindCSS không chạy trong pre-rendering của nextjs

Em đang dùng app directory của nextjs 13.4 Lúc em check thử kết quả của pre rendering thì phần tailwind css bị mất hết. Em ko biết vốn dĩ là nó như vậy hay là mình phải cài đặt thêm gì nữa không? Em có thử dùng phương pháp này nhưng vẫn không được: https://shubhamverma.me/blog/server-side-rendering-of-tailwind-css-styles-in-next-js

Nextjs - Mở link trong tab mới.

Em muốn làm sao để mở page trong một tab mới bằng next.js nhưng em ko tìm thấy option ở trong component link. Làm thế nào để dùng link component để mở page trong tab mới ạ?

next.js, chặn nút go back trên browser

Hiện tại e muốn thực hiện event như sau ạ: Khi user nhấn vào nút quay lại trên browser nhưng ko cho quay lại trang trước mà thay vào đó là hiện modal. Sau khi nhấn nút xác nhận trên modal, hủy quay lại và ở lại trên màn hình. E ko biết là ở next.js thì có cách nào để nhận biết event back button của browser không?

Hỏi về next js getStaticProps rehydration

Hiện tại thì lý thuyết SSG, ISR, SSR mình đều nắm. Nhưng trong quá trình code với next js thì mình luôn gặp lỗi cảnh báo client, server xung đột. Mình đã thử vẽ page trước rồi nhưng vẫn bị lỗi này, ko biết tại sao sao. 1. Ví dụ nếu page được tạo bằng SSG và HTML thì do page được tạo từ HTML nên sẽ pre rendering screen. Như vậy sau khi rendering (quyền điều khiển chuyển qua react) thì khi load màn hình, CSR có loading phần HTML đã được tạo trước đó ko? Hay sẽ tạo mới trên page có sẵn? 2. Nếu tạo page mới thì nội dung file HTML có sẵn đã được pre render trước đó và data do CSR vẽ khác nhau thì next js sẽ xuất cảnh báo match? 2.1 Tại next js, nếu nội dung server, client khác nhau thì lý do xuất cảnh báo match là gì? 3. Tại sao CSR sử dụng html đã tạo sẵn để vẽ page mới?

media query không chạy ở môi trường deploy mobile

Em đang chạy dự án với nextjs Khi code thì khi e đổi version mobile trên chrome devtools thì vẫn project vẫn chạy bth cho đến khi deploy xong e test iphone thì lại không được ạ. Code của e có dạng này: // size.ts const MOBILE_PX = '768px' export const MOBILE_MODE = `(max-width: ${MOBILE_PX}) as const` // index.ts import {MOBILE_MODE} from '~~~' @media (${MOBILE_MODE}) { display:flex; flex-direction: column; } Em có tra gg thì thấy ngta hay bảo cho thêm tag <meta name="viewport" ~~~ /> thì e cũng đã cho vào rồi, nhưng vẫn chưa tìm ra nguyên nhân, cứu em với mn ơi hic

Lỗi serializing trong tổ hợp Next.js SSR + react-q

Mình định dùng tổ hợp Next.js SSR + react-query, ở component page - hàm getServerSideProps, sau khi nhận prefetching thì lại bị error serializing. (Next.js là version 13) ======================= Nội dung error như sau: Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. Sau khi có search gg thử thì có ra câu trả lời thế này: return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; nhưng khi mình làm thử thì lại ra error như này: TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Mình dùng Express.js cho backend api, và dùng phương thức res.status(200).json({ data: ~ }) để response. 😱😱 Có cách nào để giải quyết được ko nhỉ? ==================================== Dưới đây là toàn bộ code của file có page component: import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

Xem user agent trong next.js getStaticProps

Chào mng, em đang làm web bằng next.js có câu hỏi này mong được mng giải đáp giúp. Ở phía server cần biết về thiết bị mobile truy cập trang thì trong getStaticProps có cách nào để xem user agent không ạ?