npm run dev
starts dev server
About Next.js
pages/*
are all the pages- The
pages/api
directory is mapped to/api/*
. Files in this directory are treated as API routes instead of React pages. _app.js
_document.js
public
folder
About MDX
- general stuff
- LaTex, math
- Codeblock
Note: things are a little messy for mdx, for experimentation purposes
- stuff under pages, such as
pages/test.mdx
, are build through@next/mdx
plugins specified innext.config.mjs
(it has to be .mjs in order to import some remark modules that are only available as ESM); styling is done through<MDXProvider components={MDXComponents}>
in_app.js
- stuff under
pages/blog
are using [staic generation with data] (https://nextjs.org/docs/basic-features/pages#static-generation-recommended), which relies onnext-mdx-remote
to do the mdx to html to math converstion and our self definedMDXComponents
for styling - in principle if we don't realy on remote data, I can directly write pages under
pages/blog
instead of doing static generation - right now (12/5/2021),
remark-math
v3 works fine, but v4 and above has breaking changes that would only work with the v2.rc of mdx-js stuff which works with@next/mdx
but notnext-mdx-remote
(which still depends on v1.6 of mdx-js)
ref https://nextjs.org/blog/markdown
About styling
extendTheme
in_app.js
styles/global.css
styles/Footer.module.css
ref https://nextjs.org/docs/basic-features/built-in-css-support ref https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106
Other file organization stuff
lib
components
data
About deployment on Vercel
Resources
- repo to learn from https://github.com/leerob/leerob.io
- course https://masteringnextjs.com/