Next.js directory structure

Entry App component (_app.tsx)

_app.tsx is the entry component of the project, its main functions are:

Customizable layout (Layout) can be extended
Import global style files
Introducing Redux state management
Introduce theme components, etc.
Global monitoring of client route switching

Configuration of ts.config.json

Next.js does not configure path aliases by default. We can configure the alias of module import in ts.config.json:

baseUrl: Configuration allows importing directly from the root directory of the project, for example: import Button from 'components/button'
paths: allows configuration of module categories, for example: import Button from '@/components/button'

Next.js configuration (next.config)

The next.config.ts configuration file is located in the project root directory and can be used to customize Next.js. For example, the following configuration can be performed:

reactStrictMode: Whether to enable strict mode to assist development and avoid common mistakes, for example: you can check expired APIs to gradually upgrade
env: Configure environment variables. You need to restart after configuration.
- ✓ Will be added to process.env.xx
- ✓ Configuration priority: env > .env.local > .env in next.config.js
basePath: To deploy your Next.js application under a subpath of your domain name, you can use the basePath configuration option.
- ✓ basePath: allows setting the URl path prefix for the application.
- ✓ For example, basePath=/music, that is, use /music to access the homepage instead of the default
images: You can configure the whitelist and other information of image URLs
swcMinify: Use Speedy Web Compiler compilation and compression technology instead of Babel + Terser technology

More configuration : https://nextjs.org/docs/api-reference/next.config.js/introduction

Built-in components

Image component

Global and local styles

Static resource reference

Font icon

Steps to use font icons:

1. Store the font icon in the assets directory
2. Font files can use relative path and absolute path reference.
3. Import global styles in the _app.tsx file
4. You can use font icons on the page

new page

routing

app.tsx checks the routing jump:

useEffect(() => {
  const handleRouteChange = (url: string) => {
    console.log(`App is changing to ${url}`);
  };
  // 监听路由的前进和后退
  // router.beforePopState(function (e) {
  //   console.log("beforePopState");
  //   console.log(e);
  //   return true;
  // });
  router.events.on("routeChangeStart", handleRouteChange);
  return () => {
    router.events.off("routeChangeStart", handleRouteChange);
  };
}, []);

Component Navigation (Link)

Programming Navigation (useRouter)

dynamic routing

Routing parameters (useRouter)

404 Page

Route matching rules

◼ Route matching priority, that is, predefined routes take precedence over dynamic routes, and dynamic routes take precedence over capturing all routes. Take a look at the following example:

1. Predefined routing: pages/post/create.js
- ✓ Will match /post/create
2. Dynamic routing: pages/post/[pid].js
- ✓ Will match /post/1, /post/abc etc.
- ✓ But does not match /post/create, /post/1/1, etc.
3. Capture all routes: pages/post/[…slug].js
- ✓ Will match /post/1/2, /post/a/b/c etc.
- ✓ but does not match /post/create, /post/abc, /post/1, /post/, etc.

From source: imooc

Next.js basic syntax