Skip to main content

Environment

What is NextJS​

  • Framework for building fast, and search-engine friendly applications
  • Server-Side Rendering(SSR): rendered on the server and return their content to the client
  • Client Side Rendering(CSR): rendered on client's web browser
  • Static Site Generation(SSG): pre-render pages and components that have static data during the build
  • Static Rendering: rendered at build time
  • Dynamic Rendering: rendered at request time
  • Server component: fast data-fetching, smaller size, SEO friendly, security
  • Client component: handle browser events, api, states and hooks
  • App router: define route segments by creating directories
  • Link component: client-side navigation
  • fetch() include auto caching

Install​

cd d:\workspace
> npx create-next-app@latest myapp
> cd myui
> npm run dev

Build​

> npm run build
>npm start

Fix typescript error in next.js with globals.css import​

  • 在根目錄建立一個檔案globals.d.ts
declare module '*.css' {
  const content: Record;
  export default content;
}

Add Google Font​

  • in the global.css file
@import url('https://googleapis.com');
@import "tailwindcss";

@theme {
  --font-display: "Inter", "sans-serif";
  --font-barlow: "Barlow", "sans-serif";
}
  • then in the layout.tsx file
import { Geist,Geist_Mono,Barlow } from "next/font/google";

const barlow = Barlow({
  variable: "--font-barlow",
  weight: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} ${barlow.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
}
  • then we can use the Barlow font in our application
<h1 className="font-bold font-barlow">Welcome to MyShop</h1>