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: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dacili/next.js
- Owner: Dacili
- Created: 2024-08-06T10:21:38.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-14T13:58:58.000Z (3 months ago)
- Last Synced: 2024-08-14T15:36:58.833Z (3 months ago)
- Topics: javascript, nextjs, react, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 66.4 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.
### 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.
### 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
The different ways to style your application in Next.js.
#### Optimizations
How to optimize images, links, and fonts.
#### Routing
How to create nested layouts and pages using file-system routing.
#### 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.