{"id":18176962,"url":"https://github.com/sahilrajput03/nextjs-examples-testing","last_synced_at":"2026-02-26T21:42:22.157Z","repository":{"id":57792280,"uuid":"351070464","full_name":"sahilrajput03/nextjs-examples-testing","owner":"sahilrajput03","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-22T13:48:52.000Z","size":4766,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T04:33:45.009Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"nextjs-examples-testing.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sahilrajput03.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-24T12:24:27.000Z","updated_at":"2023-04-11T15:35:55.000Z","dependencies_parsed_at":"2025-01-05T04:42:35.457Z","dependency_job_id":null,"html_url":"https://github.com/sahilrajput03/nextjs-examples-testing","commit_stats":{"total_commits":103,"total_committers":1,"mean_commits":103.0,"dds":0.0,"last_synced_commit":"44574f00cc1b53bdeacf0c9fccb4e6fee3558eb4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilrajput03%2Fnextjs-examples-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilrajput03%2Fnextjs-examples-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilrajput03%2Fnextjs-examples-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilrajput03%2Fnextjs-examples-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sahilrajput03","download_url":"https://codeload.github.com/sahilrajput03/nextjs-examples-testing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240332432,"owners_count":19784819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-02T17:11:58.386Z","updated_at":"2026-02-26T21:42:17.097Z","avatar_url":"https://github.com/sahilrajput03.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My Nextjs testing arena\n\n**Pinned:**\n- Examples: https://nextjs.org/examples\n- Showcase: https://nextjs.org/showcase\n\n## Using expressjs with nextjs?\n\n- [sahilrajput03/expressjs-vercel-example](https://github.com/sahilrajput03/expressjs-vercel-example) (latest attempt to run it, please read the readme of the project)\n- [sahilrajput03/nextjs-examples-testing/tree/master/custom-server-express](https://github.com/sahilrajput03/nextjs-examples-testing/tree/master/custom-server-express)\n\n## Using turbo pack in next 13 for testing extremely fast bundling\n\nQ. Why turbopack and not webpack?\n\nAns. Becoz creator of webpack works @ verce itself and he's hepling to make turbopack better along with the learnings of webpack.\n\nSource: What is Turbopack? by Vercel: [Click here](https://www.youtube.com/watch?v=6ZwnBI4Rb1w)\n\n```json\n\"dev\": \"next dev --turbo\",\n```\n\n\n\n## ClientOnly\n\n```js\nimport React from 'react'\n\nexport default function ClientOnly({children, ...delegated}) {\n\tconst [hasMounted, setHasMounted] = React.useState(false);\n\tReact.useEffect(() =\u003e {\n\t\tsetHasMounted(true);\n\t}, []);\n\tif (!hasMounted) {\n\t\treturn null;\n\t}\n\treturn \u003cdiv {...delegated}\u003e{children}\u003c/div\u003e;\n}\n```\n\n## router, routing, etc\n\n1 - https://nextjs.org/docs/api-reference/next/router\n2 - https://nextjs.org/docs/routing/introduction\n\n## Using bootstrap v5 in nextjs\n\nSource: [Click here](https://dev.to/anuraggharat/adding-bootstrap-to-nextjs-39b2)\n\n```js\n// Adding bootstrap to nextjs project? Source: https://dev.to/anuraggharat/adding-bootstrap-to-nextjs-39b2\n// Step1: Install bootstrap: `npm i bootstrap` to nextjs project.\n// Step2: Add `import 'bootstrap/dist/css/bootstrap.css'` to `_app.js` file.\n// Step3: Add `useEffect(() =\u003e {import('bootstrap/dist/js/bootstrap')}, [])` to `_app.js` file.\n\n```\n\n## To make absolute imports work in vscode you must have this\n\nAfter doing that vscode should no longer complain about module not found like errors. ~Sahil\n\n![image](https://user-images.githubusercontent.com/31458531/195992560-3c15e7a5-8ee2-4aff-be09-99a11273b38e.png)\n\n\n## Using react context in nextjs\n\nSource: [Netlify Article](https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js/)\n\n![image](https://user-images.githubusercontent.com/31458531/189399097-5d2ffb35-0539-4740-84b3-47c717579ccf.png)\n\n\n## Running browser specific code should go in `onMount` effect like that:\n\n![image](https://user-images.githubusercontent.com/31458531/189397306-d32cf6ff-aad0-432d-8219-0bd84f983117.png)\n\n\n## Using `\u003cImage /\u003e` component in nextjs TAKE: FINAL, 4 Sep, 2022\n\n- **How to use `Image` comp?:**\n\n  ![image](https://user-images.githubusercontent.com/31458531/188314261-8a933e6c-f967-4a30-a053-ac32d5e49150.png)\n\n- **Why you should use `Image` component in nextjs:**\n  - sourc1: https://youtu.be/ZRZngn_GdXY\n  - source2: https://youtu.be/h0gj4gOjz44\n- TLDR:\n  - It provides lazy loading i.e., only the images on the screen are loaded and subsequent are loaded on scroll.\n  - Images are converted to `webp` format (optimized for web) automatically thus extremely reduced size of images\n  - fixes layout shifts as well\n\n\n\n## Css modules are actually good (setup by default)\n\nWhy css modules? Amzing article by `css-tricks`: https://css-tricks.com/css-modules-part-1-need/\n\n![image](https://user-images.githubusercontent.com/31458531/186703589-f2368235-8af1-4676-9e03-f79d9bfa669a.png)\n\n## Best/Only possible way to apply styles to `Image` components of Nextjs\n\n![image](https://user-images.githubusercontent.com/31458531/186674764-fb4c37e9-beca-4e8c-8527-a97b236034a2.png)\n\n\n## using environment variables with nextjs\n\nSource: [nextjs docs](https://nextjs.org/docs/basic-features/environment-variables)\n\n![image](https://user-images.githubusercontent.com/31458531/186137800-37b7972f-1679-49b5-ae8f-da65ea177570.png)\n\n## next-auth\n\nsrc: [Authentication: It’s Easier Than You Think](https://www.youtube.com/watch?v=h6wBYWWdyYQ\u0026t=6s)\n\nmost probably in nextauth IMO: ![image](https://user-images.githubusercontent.com/31458531/186127177-af950f82-83bb-4a26-a943-2ce7f92cb791.png)\n\n![image](https://user-images.githubusercontent.com/31458531/186127362-eeec045d-a762-4286-b050-f30e6ad302ae.png)\n\nRedirect to `/login` page if you are not logged in:\n\n![image](https://user-images.githubusercontent.com/31458531/186128057-966ffca9-c2f3-4926-9fda-f5e252d1e941.png)\n\n![image](https://user-images.githubusercontent.com/31458531/186129411-15ef18d2-ae51-4714-ad3a-ee33dbd0c8ae.png)\n\n\n## Thats how you get query parameter in nextjs\n\n![image](https://user-images.githubusercontent.com/31458531/186112970-39615145-5928-4108-919d-056370e0560c.png)\n\n\n## We can change port for nextjs development server like that\n\n![image](https://user-images.githubusercontent.com/31458531/185983777-88e38813-707c-4309-963a-20dcfae410b9.png)\n\n\n## Runtime Checking development and production mode in nextjs\n\n![image](https://user-images.githubusercontent.com/31458531/185982278-9f37a150-f777-4fe9-9fdc-afb06aabe9d0.png)\n\n## You can only give height, width to an nextjs `\u003cImage /\u003e` tag like that:\n\n*Disclaimer: `width` and `height` property given directly to `\u003cImage height='' width='' /\u003e` doesn't work in my experience. ~Sahil\n\n![image](https://user-images.githubusercontent.com/31458531/186112203-fc1d7e25-6159-478e-823d-780f25f9ebb5.png)\n\n\n![image](https://user-images.githubusercontent.com/31458531/185975784-c0297c80-54ca-4068-b400-1caefa5b5ba7.png)\n\n\n## YO! We can run multiple debugger i.e,. frontend and backend\n\n![image](https://user-images.githubusercontent.com/31458531/185749877-762ee0e5-583b-4993-9acf-95c02ea3f3cc.png)\n\n- Use `useSWR` in nextjs (23k* on github):\n\n**ALERT: PLEASE USE `react-query` instead of this**\n\n![image](https://user-images.githubusercontent.com/31458531/185575633-599d911b-c76d-4d25-8a1c-6529d4372fb0.png)\n\n- Making use of client side libraries to work with nextjs setup [source](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries):\n\n![image](https://user-images.githubusercontent.com/31458531/185347247-bfe08b56-df26-4d97-9b40-aa25e2dc2094.png)\n\n\n## [Next.js](https://nextjs.org/)\n\n- 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)\n- Official Next.js examples - [Github](https://github.com/vercel/next.js/tree/canary/examples)\n- 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)\n- Example : with-expo-typescript - [Github](https://github.com/vercel/next.js/tree/canary/examples/with-expo-typescript).\n- To create a `nextjs ready apps`, follow below examples commands -\n\n```bash\n# For npm users-\nnpx create-next-app my-next-app # It uses yarn by default to install dependencies. LOL 🍉\nnpx create-next-app --example api-routes api-router-app\nnpx create-next-app --example with-expo-typescript with-expo-typescript-app\n```\n\n# Commmon Commands - Sahil Rajput\n\n`nd` - To run dev server i.e., `npm run dev` which runs `next dev`.\n\nNow, you can browse your server(with **webpack-fast-refresh enabled**) at [http://localhost:3000](http://localhost:3000)\n\n**Make the production build first via below command**\n\n1. `npm run build` which runs `next build`.\n\n2. `ns` - To serve producton build via `npm start` which runs `next start`. (Note: )\n\n**If you want a static build you can use:**\n\n`nr build:export` - To make a static build of the app in `out` directory. (`next build \u0026\u0026 next export`)\n\n---\n\n## Other Details\n\n**Tip: You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.**\n\n- Next CLI - [Docs](https://nextjs.org/docs/api-reference/cli)\n\n- [Next.js Docs](https://nextjs.org/docs)\n\n- [Next.js - Getting Started](https://nextjs.org/docs/getting-started), [#Manual Setup](https://nextjs.org/docs#manual-setup)\n\n- [Basic Features - Pages](https://nextjs.org/docs/basic-features/pages)\n\n- [Routing - Dynamic Routes](https://nextjs.org/docs/routing/dynamic-routes)\n\n- [Built-In CSS support - Docs](https://nextjs.org/docs/basic-features/built-in-css-support)\n\n- [Learn Next.js - Next.js Docs](https://nextjs.org/learn)\n\n- [Static Html Export - Article - Next.js Docs](https://nextjs.org/docs/advanced-features/static-html-export)\n\n- [Deploy your Next.js app to Vercel Platform](https://vercel.com/import?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) (from the creators of Next.js)\n\n- [Next.js deployment documentation - Next.js Docs](https://nextjs.org/docs/deployment) - Nextjs Deployment Documentation\n\n- ### See amazing resources for nextjs @ https://github.com/unicodeveloper/awesome-nextjs\n\n## Some yarn related commands\n\n```bash\n$ next -h\nUsage\n  $ next \u003ccommand\u003e\n\nAvailable commands\n  build, start, export, dev, telemetry\n\nOptions\n  --version, -v   Version number\n  --help, -h      Displays this message\n\nFor more information run a command with the --help flag\n  $ next build --help\n```\n\n```bash\n# For yarn users-\nyarn create next-app my-next-app # Where my-next-app would be name of project.\nyarn create next-app --example api-routes api-router-app\nyarn create next-app --example with-expo-typescript with-expo-typescript-app\n\nyarn dev\nyarn start\n```\n\n\n## Disable ssr on nextjs page\n\nSource: https://stackoverflow.com/a/53191080/10012446\n\n**Building SPA** with `nextjs` and `react-router-dom`: Amazing [Article](https://colinhacks.com/essays/building-a-spa-with-nextjs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahilrajput03%2Fnextjs-examples-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsahilrajput03%2Fnextjs-examples-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahilrajput03%2Fnextjs-examples-testing/lists"}