Posted
on January 10, 2025, 7:46 pm,
by admin,
under
nexjs ,
react .
React/Next.Js/Javascript page
const currency = €;
const { t } = useTranslation( ) ;
< Trans
t= { t}
i18nKey= { 'Path.To.Mykey' }
components= { {
customspantorender: < Customspan currency= { currency} />,
} }
/>
Customspan.tsx
import React from 'react' ;
const Customspan = ( { currency } ) => {
const amount = 15.99 ;
return (
< span> { currency} { amount} </ span>
) ;
} ;
export default Customspan;
sample.json
"Path" : {
"To" : {
"Mykey" : "(Amount = <customspantorender>€€€</customspantorender>)"
} ,
}
Posted
on January 6, 2025, 4:54 pm,
by admin,
under
apache ,
http .
301 – Permanently Move (Simple Redirect Post plugin does this)
302 – Temporarily Move
307 – Temporarily Redirect
Posted
on January 6, 2025, 12:05 pm,
by admin,
under
laravel ,
nexjs .
Initial configuration:
Laravel 7.x folder: /var/www/laravel
Next.Js folder: /var/www/public_html
Step 1. Add your api response to laravel
Add to /var/www/routes/web.php
Route::get('/', [
'uses' => 'IndexController@categories',
]);
Add to /var/www/app/Http/Controllers/IndexController.php
public function index() {
return response()->json(['Hello world']);
}
Step 2. Add api/ folder to Next.Js public folder. Don’t touch existing Next.Js static html files
Move /var/www/laravel/public/index.php to /var/www/public_html/api
Then edit it, change the following:
require __DIR__.'/../vendor/autoload.php';
to
require __DIR__.'/../../laravel/vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';
to
$app = require_once __DIR__.'/../../laravel/bootstrap/app.php';
Move /var/www/laravel/public/.htaccess to /var/www/public_html/api, no need to edit it
Finally
Try to access your domain.com/api. It should work
Posted
on December 22, 2024, 3:25 pm,
by admin,
under
apple mac .
Go to the Keychain Access app on your Mac.To open Keychain Access, search for it in Spotlight, then press Return. Click “login” in the Keychains list. Choose Edit > Change Settings for Keychain “login”. Find the “Lock after” tickbox, then untick the box. However: if you want to require a password if keychain password is out of sync However: If you want to require a password each time the computer goes to sleep, select the “Lock when sleeping” tickbox. Click Save.
Source: https://support.apple.com/en-ie/guide/keychain-access/kyca1242/mac
Posted
on November 19, 2024, 10:14 am,
by admin,
under
nexjs .
'use client'
import { createContext, useContext, useState } from 'react' ;
export const MyContext = createContext( ) ;
export function MyProvider( { children} ) {
const [ mymessage, setMymessage] = useState( "" ) ;
return (
< MyContext.Provider value= { { mymessage, setMymessage } } >
{ children}
</ MyContext.Provider >
)
}
export function useMy( ) {
const context = useContext( MyContext)
if ( ! context) {
throw new Error( 'useTheme must be used within ThemeProvider' )
}
return context;
}
Usage:
components/Navbar.js
const { mymessage } = useMy( ) ;
console.info ( mymessage) ;
page.tsx
const { setMymessage } = useMy( ) ;
setMymessage( 'message fror Navbar' ) ;
PLA – Product Listing Ad – A commercing ad in Google, Bing to show individual product with images. On click it takes to PDP page with that ad
PPC – Pay per click – advertisers pay a fee each time a user clicks on their ad
const exec = require( 'child_process' ) .exec
var yourExecCmd = 'ls -ltr'
// Function to exec shell cmd with callback
function execWithCallback( ) {
this .execCommand = function ( cmd, callback) {
exec( cmd, ( error, stdout, stderr) =& gt; {
if ( error) {
console.error ( `exec error: ${ error} `)
return
}
console.log ( 'stdout:' , stdout)
console.log ( 'stderr:' , stderr)
callback( stdout)
} )
}
}
var execWithCallback = new execWithCallback( )
execWithCallback.execCommand ( yourExecCmd, function ( result) {
console.log ( 'result' )
console.log ( result)
} )
Posted
on September 5, 2024, 2:25 pm,
by admin,
under
nexjs .
Regular import
When using a regular component import, Next.js bundles the component’s code together with the rest of the components for a given route. This usually means you end up with a big chunk containing all the components code for each route.
next/dynamic
with ssr: true
When using next/dynamic
with ssr: true
, Next.js splits the component’s code into a separate chunk (code splitting) and loads that chunk separately (lazy loading).
This means that for the scenario that you described:
import dynamic from 'next/dynamic'
const DynamicButton = dynamic( ( ) => import ( './dynamicButton' ) , { ssr: true } )
...
return showButton && < DynamicButton />
The DynamicButton
component only gets loaded when showButton
is truthy. This has the benefit of reducing the amount of JavaScript that’s loaded on initial page load.
next/dynamic
with ssr: false
When using next/dynamic
with ssr: false
, all the above benefits of the dynamic import also apply. However, the component’s code will not get preloaded on the server and will only run on the client. This is typically useful when the component includes a library or API that only works in the browser.
Posted
on July 3, 2024, 4:01 pm,
by admin,
under
nexjs .
Next.Js prior version 13 ( pages/ folder )Next.Js version 13.4 ( app/ folder ) getStaticProps with revalidatefetch(URL, { next: { revalidate: 10 } }) – use this one getStaticProps fetch(URL, { cache: ‘no-store’ }) getServerSideProps fetch(URL, { cache: ‘force-cache’ }) getStaticPaths() generateStaticParams()
Posted
on April 1, 2024, 2:03 pm,
by admin,
under
git .
git commit --amend -m "an updated commit message"