next.js Some components 和专业名词缩写解

npx create-next-app
=>see its jason file
npm run dev when develop
and the last two for deploy

Typescript

=>create tsconfig=>调一些设置：
"strict":true
"strictNullChecks":true

install prettier

• An opinionated code formatter
• Supports many languages
• Integrates with most editors
• Has few options

EmotionCSS

module css ： still css file / no access to js runtime
style css: doesn't survive very well in their own modules
Emotions: amazing frameworks for css in js
same css but within js runtime
npm i @emotion/react

next

routing

file system based routing
everything below pages would directly become routes

public directory

everything below public directory would be static assets

next/image->Image component【c】

It is a very thin wrapper on top of HTML image element, but it is tailored for the modern web good practice.

• image optimization without increasing our build time
  (like other static website generators do and optimizing for images)
• not so sure: 感觉是在FTP的时候就计算出了图片layout所以再后面加载（懒加载）出图片的时候就不需要重新painting

SEO

Search Engine Optimization
which is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.

MDX [next-mdx-remote]【c】

combine Js and markdown together

Grey matter 【c】

Parse front-matter from a string or file
Fast, reliable and easy to use. Parses YAML front matter by default, but also has support for YAML, JSON, TOML or Coffee Front-Matter, with options to set custom delimiters. Used by metalsmith, assemble, verb and many other projects.

tips

• For security: when you got target property for <a> , then with rel='noopener noreferrer'

Buy me a coffee