Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sahilrajput03/nextjs-examples-testing
https://github.com/sahilrajput03/nextjs-examples-testing
Last synced: about 7 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/sahilrajput03/nextjs-examples-testing
- Owner: sahilrajput03
- Created: 2021-03-24T12:24:27.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-22T13:48:52.000Z (over 1 year ago)
- Last Synced: 2024-11-09T17:41:55.580Z (about 2 months ago)
- Language: JavaScript
- Homepage: nextjs-examples-testing.vercel.app
- Size: 4.55 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# My Nextjs testing arena
**Pinned:**
- Examples: https://nextjs.org/examples
- Showcase: https://nextjs.org/showcase
## Using expressjs with nextjs?
- [sahilrajput03/expressjs-vercel-example](https://github.com/sahilrajput03/expressjs-vercel-example) (latest attempt to run it, please read the readme of the project)
- [sahilrajput03/nextjs-examples-testing/tree/master/custom-server-express](https://github.com/sahilrajput03/nextjs-examples-testing/tree/master/custom-server-express)
## Using turbo pack in next 13 for testing extremely fast bundling
Q. Why turbopack and not webpack?
Ans. Becoz creator of webpack works @ verce itself and he's hepling to make turbopack better along with the learnings of webpack.
Source: What is Turbopack? by Vercel: [Click here](https://www.youtube.com/watch?v=6ZwnBI4Rb1w)
```json
"dev": "next dev --turbo",
```
## ClientOnly
```js
import React from 'react'
export default function ClientOnly({children, ...delegated}) {
const [hasMounted, setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return
{children};
}
```
## router, routing, etc
1 - https://nextjs.org/docs/api-reference/next/router
2 - https://nextjs.org/docs/routing/introduction
## Using bootstrap v5 in nextjs
Source: [Click here](https://dev.to/anuraggharat/adding-bootstrap-to-nextjs-39b2)
```js
// Adding bootstrap to nextjs project? Source: https://dev.to/anuraggharat/adding-bootstrap-to-nextjs-39b2
// Step1: Install bootstrap: `npm i bootstrap` to nextjs project.
// Step2: Add `import 'bootstrap/dist/css/bootstrap.css'` to `_app.js` file.
// Step3: Add `useEffect(() => {import('bootstrap/dist/js/bootstrap')}, [])` to `_app.js` file.
```
## To make absolute imports work in vscode you must have this
After doing that vscode should no longer complain about module not found like errors. ~Sahil
## Using react context in nextjs
Source: [Netlify Article](https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js/)
## Running browser specific code should go in `onMount` effect like that:
## Using `` component in nextjs TAKE: FINAL, 4 Sep, 2022
- **How to use `Image` comp?:**
- **Why you should use `Image` component in nextjs:**
- sourc1: https://youtu.be/ZRZngn_GdXY
- source2: https://youtu.be/h0gj4gOjz44
- TLDR:
- It provides lazy loading i.e., only the images on the screen are loaded and subsequent are loaded on scroll.
- Images are converted to `webp` format (optimized for web) automatically thus extremely reduced size of images
- fixes layout shifts as well
## Css modules are actually good (setup by default)
Why css modules? Amzing article by `css-tricks`: https://css-tricks.com/css-modules-part-1-need/
## Best/Only possible way to apply styles to `Image` components of Nextjs
## using environment variables with nextjs
Source: [nextjs docs](https://nextjs.org/docs/basic-features/environment-variables)
## next-auth
src: [Authentication: It’s Easier Than You Think](https://www.youtube.com/watch?v=h6wBYWWdyYQ&t=6s)
most probably in nextauth IMO: 
Redirect to `/login` page if you are not logged in:
## Thats how you get query parameter in nextjs
## We can change port for nextjs development server like that
## Runtime Checking development and production mode in nextjs
## You can only give height, width to an nextjs `` tag like that:
*Disclaimer: `width` and `height` property given directly to `` doesn't work in my experience. ~Sahil
## YO! We can run multiple debugger i.e,. frontend and backend
- Use `useSWR` in nextjs (23k* on github):
**ALERT: PLEASE USE `react-query` instead of this**
- Making use of client side libraries to work with nextjs setup [source](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries):
## [Next.js](https://nextjs.org/)
- create-next-app - [Github](https://github.com/vercel/next.js/tree/canary/packages/create-next-app), [Article in Docs](https://nextjs.org/docs/api-reference/create-next-app)
- Official Next.js examples - [Github](https://github.com/vercel/next.js/tree/canary/examples)
- Example : api-router - [Github](https://github.com/vercel/next.js/tree/canary/examples/api-routes), [Article in Docs](https://nextjs.org/docs/api-routes/introduction)
- Example : with-expo-typescript - [Github](https://github.com/vercel/next.js/tree/canary/examples/with-expo-typescript).
- To create a `nextjs ready apps`, follow below examples commands -
```bash
# For npm users-
npx create-next-app my-next-app # It uses yarn by default to install dependencies. LOL 🍉
npx create-next-app --example api-routes api-router-app
npx create-next-app --example with-expo-typescript with-expo-typescript-app
```
# Commmon Commands - Sahil Rajput
`nd` - To run dev server i.e., `npm run dev` which runs `next dev`.
Now, you can browse your server(with **webpack-fast-refresh enabled**) at [http://localhost:3000](http://localhost:3000)
**Make the production build first via below command**
1. `npm run build` which runs `next build`.
2. `ns` - To serve producton build via `npm start` which runs `next start`. (Note: )
**If you want a static build you can use:**
`nr build:export` - To make a static build of the app in `out` directory. (`next build && next export`)
---
## Other Details
**Tip: You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.**
- Next CLI - [Docs](https://nextjs.org/docs/api-reference/cli)
- [Next.js Docs](https://nextjs.org/docs)
- [Next.js - Getting Started](https://nextjs.org/docs/getting-started), [#Manual Setup](https://nextjs.org/docs#manual-setup)
- [Basic Features - Pages](https://nextjs.org/docs/basic-features/pages)
- [Routing - Dynamic Routes](https://nextjs.org/docs/routing/dynamic-routes)
- [Built-In CSS support - Docs](https://nextjs.org/docs/basic-features/built-in-css-support)
- [Learn Next.js - Next.js Docs](https://nextjs.org/learn)
- [Static Html Export - Article - Next.js Docs](https://nextjs.org/docs/advanced-features/static-html-export)
- [Deploy your Next.js app to Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) (from the creators of Next.js)
- [Next.js deployment documentation - Next.js Docs](https://nextjs.org/docs/deployment) - Nextjs Deployment Documentation
- ### See amazing resources for nextjs @ https://github.com/unicodeveloper/awesome-nextjs
## Some yarn related commands
```bash
$ next -h
Usage
$ next
Available commands
build, start, export, dev, telemetry
Options
--version, -v Version number
--help, -h Displays this message
For more information run a command with the --help flag
$ next build --help
```
```bash
# For yarn users-
yarn create next-app my-next-app # Where my-next-app would be name of project.
yarn create next-app --example api-routes api-router-app
yarn create next-app --example with-expo-typescript with-expo-typescript-app
yarn dev
yarn start
```
## Disable ssr on nextjs page
Source: https://stackoverflow.com/a/53191080/10012446
**Building SPA** with `nextjs` and `react-router-dom`: Amazing [Article](https://colinhacks.com/essays/building-a-spa-with-nextjs)