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": […]
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 Add to /var/www/app/Http/Controllers/IndexController.php 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: Move /var/www/laravel/public/.htaccess to /var/www/public_html/api, no need […]
‘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 […]
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) => { 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, […]
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 […]
Next.Js prior version 13 ( pages/ folder ) Next.Js version 13.4 ( app/ folder ) getStaticProps with revalidate fetch(URL, { next: { revalidate: 10 } }) – use this one getStaticProps fetch(URL, { cache: ‘no-store’ }) getServerSideProps fetch(URL, { cache: ‘force-cache’ }) getStaticPaths() generateStaticParams()