Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dacili/next.js
https://github.com/dacili/next.js
javascript nextjs react tailwindcss
Last synced: about 14 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/dacili/next.js
- Owner: Dacili
- Created: 2024-11-15T11:01:49.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-11-15T11:11:26.000Z (3 months ago)
- Last Synced: 2024-12-29T07:16:50.773Z (about 2 months ago)
- Language: TypeScript
- Size: 899 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js
Next.js is a **React framework** for the Web that gives you building blocks to create web applications.
Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.
## One of the key strengths of Next. js is its ability to do frontend and backend development in the same project!
It's not only a FE framework!
---
### React JS vs Next JS
The major difference between Next JS and React JS is performance. If we talk about Next. js applications, they are extremely fast because of the static destinations and server-side rendering.
---
### Angular vs Next JS
---
### Vercel
Vercel is a frontend cloud from the creators of Next.js, making it easy to get started with Next.js quickly.
It contains prebuilt template solutions that you can reuse, and deploy.
---
#### Project specifications:
```
"react": "^18",
"react-dom": "^18",
"next": "14.2.5"
```
#### Create project
Run in terminal command:
```
npx create-next-app@latest
```
You will see questions such as, provide the name of the project, are you going to use tailwind CSS, and so on.
Once you complete these questions, the app is created.
Project structure:
```globals.css```
is the main CSS file. The Tailwind CSS is imported there as well.
```postcss.config.mjs, tailwind.config.ts``` are files for Tailwind CSS configuration
#### Run project
check in ```package.json```, scripts:
run command:
```
npm run dev
```
once it's done with loading, you should see this message, and you can enter ```localhost:3000 ``` in browser:
----
## Features of Next.js:
### Styling
Global CSS file is: ```global.css```, like in Angular we have: ```styles.scss``` or ```styles.css```
There are different ways to style your application in Next.js.
Tailwind and CSS modules are the two most common ways of styling Next.js applications. You can use one or both of them.
1) **Tailwind**
Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your TSX markup.
> It contains bunch of class names, which you then combine.
```
export default function Page() {
return (
// These are Tailwind classes:
// ...
)
}
```
2) **CSS modules**
- usual classes that you made, and then use
- good side: CSS classes are locally scoped to components by default, reducing the risk of styling conflicts
CSS file:
```
.someClass {
height: 10px;
width: 10px;
}
```
tsx. file:
```
import styles from '@/app/ui/some.module.css';
export default function Page() {
return (
)
}
```
----
### Optimizations
How to optimize:
1) **Fonts**
Sometimes, if apps are getting fonts with API requests, the initial load look will be different from the later load (layout shift).
Next.js downloads font files **at build time** and hosts them with your other static assets.
This means when a user visits your application, there are no additional network requests for fonts which would impact performance.
*Note: I think we can have the same effect in other frameworks if we just download font files, and use them into assets saved.*
fonts.ts:
```
import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({
weight: ['400', '700'],
subsets: ['latin'],
});
```
somePage.tsx:
```
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
{children} // we could add other css classes in same part
);
}
```
2) **Images**
Usual use of img in HTML is:
```
```
but it has some things that you have to do manually:
- image responsiveness on different screen sizes,
- specify image sizes for different devices,
- prevent layout shift as the images load,
- lazy load images that are outside the user's viewport
The `````` Component is an extension of the HTML ![]()
tag, and comes with **automatic image optimization**, such as fixing the things mentioned above and serving images in modern formats, like WebP and AVIF, when the browser supports it.
```
import Image from 'next/image';
export default function Page() {
return (
);
}
```
---
### Routing
How to create nested layouts and pages using file-system routing.
**Nested routing** - Each folder represents a route segment that maps to a URL segment.
```page.tsx``` is a special Next.js file that exports a React component, and it's required for the route to be accessible.
> To create a nested route, you can nest folders inside each other and add ```page.tsx``` files inside them.
```page.tsx``` file can look like:
```
export default function Page() {
return
Mediii Page
;
}
```
**Dynamic route** - for example you are forwarding id to the route. A Dynamic Segment can be created by wrapping a file or folder name in square brackets: [segmentName]. For example, [id].
in medi/[mediId].js:
```
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return
Post: {router.query.mediId}
}
```
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes
**Nested layouts** - In Next.js, you can use a special ```layout.tsx``` file to create UI that is **shared between multiple pages**.
> One benefit of using layouts in Next.js is that on navigation, only the *page components update* while the *layout won't re-render*. This is called **partial rendering**
The component receives a **children** prop. This child can either be a *page or another layout*.
```layout.tsx``` file can look like:
```
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
for ex. the pages inside /dashboard will automatically be nested inside a like so:
``` /app/layout.tsx``` is **root layout** and is required.
> Any UI you add to the root layout will be **shared across all pages** in your application.
**The ``` ``` component** - link between pages in your application (navigation)
> It's the same as ``````, but difference is, if you use , then *whole page is reloaded (refreshed)*, but if you use ```Link```, it will not reload whole page.
In production, whenever components appear in the browser's viewport, Next.js automatically **prefetches** the code for the linked route in the background.
**Automatic code-splitting and prefetching**
Next.js automatically code splits your application by *route segments*. This is different from a traditional React SPA, where the browser loads all your application code on initial load.
Splitting code by routes means that **pages become isolated**. If a certain page throws an error, the rest of the application will still work.
**if we want to know, which navigation menu is currently selected:**
```
const pathname = usePathname();
```
---
### Data Fetching
How to set up a database on Vercel, and best practices for fetching and streaming.
---
### Search and Pagination
How to implement search and pagination using URL Search Params.
---
### Mutating Data
How to mutate data using React Server Actions, and revalidate the Next.js cache.
---
### Error Handling
How to handle general and 404 not found errors.
---
### Form Validation and Accessibility
How to do server-side form validation and tips for improving accessibility.
---
### Authentication
How to add authentication to your application using NextAuth.js and Middleware.
---
### Metadata
How to add metadata and prepare your application for social sharing.
----