https://github.com/selmasaltik/foodies-next-app
A (Pretty Deep Dive) Introduction to Next.js /// What I learned from "React - The Complete Guide 2024 (incl. Next.js, Redux) - Academind by Maximilian Schwarzmüller"
https://github.com/selmasaltik/foodies-next-app
app-router better-sqlite3 foodies next-js nextjs react sqlite-database use-client use-server
Last synced: 3 months ago
JSON representation
A (Pretty Deep Dive) Introduction to Next.js /// What I learned from "React - The Complete Guide 2024 (incl. Next.js, Redux) - Academind by Maximilian Schwarzmüller"
- Host: GitHub
- URL: https://github.com/selmasaltik/foodies-next-app
- Owner: selmasaltik
- Created: 2024-11-09T23:26:04.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-14T04:50:55.000Z (7 months ago)
- Last Synced: 2025-01-27T08:53:14.797Z (5 months ago)
- Topics: app-router, better-sqlite3, foodies, next-js, nextjs, react, sqlite-database, use-client, use-server
- Language: JavaScript
- Homepage: https://foodies-next-app-jade.vercel.app
- Size: 2.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FullStack React Apps with NextJS
***Building Up On React***
- What Is [NextJS](https://nextjs.org/) & Why Would You Use It?
- Routing, Pages & Server Components
- Fetching & Sending Data
- Styling, Image Upload & Managing Page Metadata
[Filesystem-based Routing](https://www.canva.com/design/DAGWA5wy80o/t1uyFushbFDuS9YAx12oWA/view?utm_content=DAGWA5wy80o&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[NextJS Works With React Server Components](https://www.canva.com/design/DAGWA50u2Lk/Yx-7IRKhvbEX1IYpQHbyGw/view?utm_content=DAGWA50u2Lk&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[Filenames Matter!](https://www.canva.com/design/DAGWBKcUa8Y/zuMyFtfeQ8dtY4L02G2wzw/view?utm_content=DAGWBKcUa8Y&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[NextJS Renders Pages On The Server](https://www.canva.com/design/DAGWBGBNK6s/jn9-_tYzJAS3lcmwzdKDcg/view?utm_content=DAGWBGBNK6s&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[Server-side & Client-side Working Together](https://www.canva.com/design/DAGWBaMERxQ/-swjilwkU7vVryvDLpekiw/view?utm_content=DAGWBaMERxQ&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[Pages & Layouts](https://www.canva.com/design/DAGWBT-lc2M/TJSJAlKNfPUpvMs-KpZ0Zw/view?utm_content=DAGWBT-lc2M&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[Getting Started: Project Structure](https://nextjs.org/docs/app/getting-started/project-structure#colocation)
**Reserved Filenames**
As you already learned, there are some reserved filenames when working with NextJS.
Important: These filenames are only reserved when creating them inside of the `app/` folder (or any subfolder). Outside of the `app/` folder, these filenames are not treated in any special way.
Here's a list of reserved filenames in NextJS - you'll, of course, learn about the important ones throughout this section:
- `page.js` => Create a new page (e.g., `app/about/page.js` creates a `/about` page)
- `layout.js` => Create a new layout that wraps sibling and nested pages
- `not-found.js` => Fallback page for "Not Found" errors (thrown by sibling or nested pages or layouts)
- `error.js` => Fallback page for other errors (thrown by sibling pages or nested pages or layouts)
- `loading.js` => Fallback page which is shown whilst sibling or nested pages (or layouts) are fetching data
- `route.js` => Allows you to create an API route (i.e., a page which does NOT return JSX code but instead data, e.g., in the JSON format)
You also find a list with all supported filenames & detailed explanations in the official docs: https://nextjs.org/docs/app/api-reference/file-conventions
[Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwindcss.com/)
[Building Your Application: Styling](https://nextjs.org/docs/app/building-your-application/styling)
[Components: Image](https://nextjs.org/docs/app/api-reference/components/image)
[Server vs Client Components](https://www.canva.com/design/DAGWGovwgX8/6I4D3N0s31eKKmboRJx7Lw/view?utm_content=DAGWGovwgX8&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[Vanilla React Apps Render On The Client](https://www.canva.com/design/DAGWGj-49-0/wdjLZuaaWBIwP41Vvy2aaA/view?utm_content=DAGWGj-49-0&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[With NextJS, You Build FullStack Applications](https://www.canva.com/design/DAGWGkINi7U/GkoQTB_WkBKHbzlr-WPuvQ/view?utm_content=DAGWGkINi7U&utm_campaign=designshare&utm_medium=link&utm_source=editor)
[npm: better-sqlite3](https://www.npmjs.com/package/better-sqlite3)
[File Conventions: error.js](https://nextjs.org/docs/app/api-reference/file-conventions/error)
[File Conventions: not-found.js](https://nextjs.org/docs/app/api-reference/file-conventions/not-found)
['use client' directive – React](https://react.dev/reference/rsc/use-client)
['use server' directive – React](https://react.dev/reference/rsc/use-server)
[useFormStatus – React](https://react.dev/reference/react-dom/hooks/useFormStatus)
[useActionState – React](https://react.dev/reference/react/useActionState)
[Building Your Application: Caching](https://nextjs.org/docs/app/building-your-application/caching)
[Functions: revalidatePath](https://nextjs.org/docs/app/api-reference/functions/revalidatePath)
[Optimizing: Static Assets](https://nextjs.org/docs/pages/building-your-application/optimizing/static-assets)
[Functions: generateMetadata](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)