✳flâneur — a map of the web's best reading

emanuelefavero/next-js: A Next.js cheat sheet repository

github.com · 3,340 words · saved by 1 readers

Pages folder - is the only required folder in a Next.js app. All the React components inside pages folder will automatically become routes Note: The name of the file will be the route name, use lowercase for the file name and PascalCase for the component name Public folder - contains static assets such as images, files, etc. The files inside public folder can be accessed directly from the root of the application Styles folder - contains stylesheets, here you can add global styles, CSS modules, etc Usually globals.css is imported in the _app.js file Components folder - contains React components The @ alias is used to import files from the root of the project To use the @ alias, add the following to the jsconfig.json file at the root of the project The Head component should be placed inside the Layout component or inside the _app.js file Wrap around each page and here is where you would import global styles and put header and footer components Note: You could also put the header and foot

Next JS A Next.js cheat sheet repository Example Projects Project Description next-js-example-app A bare-bone example app with local data Table of Contents Create a new Next.js app ESLint Manual Installation Folder Structure Routing Meta tags The _app.js file The Layout component Sass Tailwind CSS Styled JSX The _document.js file The Image component The Script component Fetch data Example of using getStaticPaths and getStaticProps together Fetch Data on the client SWR When to use Static Generation v.s. Server-side Rendering Dynamic routes Custom 404 pages Export Static Site API Routes Check fo

Explore this link on the map →

related reading