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'
