ReasonJun

Dynamic Routing pages/product/first-item pages/category/[slug].js => /category/:slug (ex. /category/food ) pages/[username]/info.js => /:username/info (ex. /youjun/info ) pages/cart/[...slug].js => /cart/* (ex. /cart/2022/06/24 ) useRouter / query Multiple Slug pages/[username]/[info].js const { username, info } = router.query pages/cart/[...slug].js const { slug } = router.query => array Option..

components/Layout.js Create a common component separately as a layout.js file in the component folder and apply it to pages/_app.js. pages/_app.js => Setting overall position in Component. import '@/styles/globals.css'; import Layout from '@/components/Layout'; export default function App({ Component, pageProps }) { const getLayout = Component.getLayout || ((page) => {page}); return getLayout();..

In Next.js, the Image component is a built-in component that provides optimized image loading and rendering. It is specifically designed to handle images and offers several features to improve performance, such as automatic image optimization, lazy loading, and responsive image support. The Image component is part of the next/image package, which is included by default in Next.js projects. Here'..

import Head from 'next/head'; import { Inter } from 'next/font/google'; import Link from 'next/link'; import { useEffect, useState } from 'react'; const inter = Inter({ subsets: ['latin'] }); export async function getStaticProps() { return { props: { time: new Date().toISOString() }, }; } export default function ISR({ time }) { return ( {time} ); } The data is updated when the page is refreshed.

SSG and ISR are two different ways of rendering web pages. SSG stands for Static Site Generation, and ISR stands for Incremental Static Regeneration. SSG is a technique where the pages of a website are rendered on the server before the user requests them. This means that the pages are pre-rendered and served to the user as static files. SSG has a number of benefits, including: Faster page load t..

remark and remark-html are two JavaScript libraries that can be used to process Markdown. remark is a general-purpose Markdown processor that can be used to do a variety of things, such as: Parsing Markdown into an abstract syntax tree (AST) Transforming the AST into different formats, such as HTML, JSON, or XML Linting Markdown for errors or inconsistencies Adding custom extensions to Markdown ..