Category: Learning

Categories
Javascript Learning Tech

Function getStaticPaths, How to create paths in getStaticProps function If you have no access to create paths in getStaticPaths, NEXTJS

Hello,

Hope this is very interesting question of scenario you might be facing to solve with next js and

  • when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
  • when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”

Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js“

First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!

export async function getStaticPaths() {
    // Empty array since paths will be dynamically created in getStaticProps
    return {
        paths: [],
        fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !! 
    };
};

Next, we need to edit our “getStaticProps” function and then voila;


export async function getStaticProps({ params }) {
    const product = await getProduct(params && params.id);
    if (!product) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }

    return {
        props: {
            product,
            error: resp.error ? true : false
        }
    };
}

Boom you are done, and just use those props in your page component like



return (<PhotoProvider
        key={'photoprovider-key-' + product?.id}
        speed={() => 600}
        easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>

/*...other codes*/
</PhotoProvider>

you will find you page up and working, fine!

Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!

I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.

Happy Learning! Thanks for reading.

Keep coding & Develop Wonderful.

To Follow help out to know: uidevwork

Categories
Javascript Learning Tech

What is forwardRef and how its helps in react?

Hello, lets quickly take a review on React forwardRef, what it in actual,

In React, the forwardRef function is a utility that allows you to pass a ref through a component to one of its children. It’s commonly used when you need to access the underlying DOM node or React component instance of a child component from the parent component.

When you create a component using functional components in React, you can use the useRef hook to create a ref object. This ref object can then be passed as a prop to child components. However, when you pass the ref as a prop to a child component, React does not automatically pass it down to the underlying DOM element or custom component. This is where forwardRef comes into play.

By using forwardRef, you can create a component that accepts a ref and forwards it to one of its children. Here’s an example:

const ChildComp = React.forwardRef((props, ref) => {
  // Use the ref object to access the underlying DOM node or component instance
  return <input ref={ref} />;
});

const ParentComp = () => {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    // Access the input element using the ref
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In the example above, the ChildComponent uses forwardRef to forward the ref prop to the <input> element. In the ParentComponent, a ref is created using the useRef hook and passed to ChildComponent using the ref prop. This allows the ParentComponent to access the input element and call the focus method when the button is clicked.

By using forwardRef, helps to bridge the gap between functional components and the imperative DOM or component operations that sometimes require direct access to child component element.

Note here we are accessing child’s component dom node not child component here as ref object, i.e can be consider as subtle difference to understand for our mind.

Hope this helps to clear out the basic concept behind using forwardRef in React.

Happy Learning!

Categories
Javascript Learning Tech

How to fix nextjs appending http://localhost:3000/_next/image? to the image srcset how to remove for production build for images?

Hello,

Welcome to the question and for the search, facing this issue? lets quickly see how we can fix this, with and in next.config.js file.

In Next.js, when using the next/image component, the src attribute is automatically transformed to a URL that goes through the Next.js image optimization pipeline. During development, this URL may include http://localhost:3000/_next/image? to indicate the local development server.

However, for production images, you can configure Next.js to remove the http://localhost:3000/_next/image? prefix. Here’s how you can achieve that:

Create a custom loader for Next.js images:

  • Open next.config.js and add the following code:
    • module.exports = {
    • images: {
      • loader: 'imgix',
      • path: '', // Remove the path prefix for production images
    • }, };
  • This configuration sets the loader option to use the imgix loader, which removes the http://localhost:3000/_next/image? prefix. The path option is set to an empty string, this will leave the prefix for image urls and left blank

Now you can easily build your project and test to images are loading fine with absolute url path if applied so.

Hope this help to solve the issue.

Happy Learning!

Categories
Learning Learning Tech

How to sync generated next.js out folder build to android/android studio in capacitor?

Hello, Welcome to the feel and question.

Here is a quick way do it out!

Build the Next.js project: Run the build command for your Next.js project, which typically generates a production-ready build in the “out”/ “build” folder. 

npx next build && npx next export

Locate the build output: Once the build process is finished, locate the generated “out” folder in your Next.js project directory.

Copy the build output: Copy the entire contents of the “out” folder, including any subfolders and files.

Paste the build output in the Android project: Navigate to the root directory of your Android project in Capacitor. The default location is usually the “android” folder within your Capacitor project.

Paste the build output: Paste the contents of the “out” folder into the appropriate location in your Android project. By default, you can paste it into the “app/src/main/assets/public” directory of your Android project.

Sync the Android project: After pasting the build output, trigger a sync operation in Android Studio to ensure the changes are recognized. This can be done by clicking on the “Sync Project with Gradle Files” button or by selecting “File” -> “Sync Project with Gradle Files” in the Android Studio menu.

Build and run the Android project: Once the sync operation is complete, you can build and run your Android project to deploy the updated Next.js web application within your Capacitor app.

Voila you are done!.

Hope this question and learning helps.

Happy Learning!

Categories
Learning

Webpack cache issue: start value has mixed support, consider using flex-start instead

Hello,
If you facing issue like below:

//NextJS Compilation Error on Server Start:

(11716:3) autoprefixer: start value has mixed support, consider using flex-start instead
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|F:\WORK\maw\code\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[1]!F:\WORK\maw\code\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[2]!F:\WORK\maw\code\node_modules\next\dist\build\webpack\loaders\resolve-url-loader\index.js??ruleSet[1].rules[2].oneOf[9].use[3]!F:\WORK\maw\code\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[2].oneOf[9].use[4]!F:\WORK\maw\code\styles\main.scss': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

The reason to this is you are using wrong value, somewhere in your scss or css file, in my case i have set align-items to ‘start‘ which is incorrect so compilation through’s error when running nextjs server. 

align-items start value issue

Fix, is simple correct it with the right value, so I have updated with ‘flex-start’ fixed the compilation issue and server is up and running. 

Hope this quick help would save your time!

Happy Learning.

Categories
Learning Learning Tech

Laravel getting error: Target class [App\Http\Controllers\GurbaniReadingController::class] does not exist. But file already exists!!

Hello Guys,

Facing this issue and struggling to find the cause?, okay then lets direct jump in to the fix I found or more precisely mistake I found!

In picture you might seeing controller name is different than I have mentioned below; I am changed it to Book, so don’t get confuse.

In my case I was wrapped the loading on controller in web.php route with single quotes!

Line of code causing this error:

Route::get('/book-readings/upload-photos', ['App\Http\Controllers\BookReadingController::class', 'uploadPhotos']);

Very carefully watch in above code code was wrapped in quotes: ‘App\Http\Controllers\BookReadingController::class’,
Controller should be loaded without single quotes;

And second important reason is it, this line should shall fall before the resource route if you have similar to this controller, in my case it was : 

Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class); 
// this line was defined before the above route I wanted to work! (I am not sure why this line causing to stop showing the page :/)

Finally I make these changes so everything started working smoothly & all routes loading fine and up!.

// Upload Audio Files:
Route::get('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'showPhotos'])->name('book-readings.upload-photos');
Route::post('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'uploadPhotos']);
Route::delete('/book-readings/upload-photos/{id}', [App\Http\Controllers\BookReadingController::class, 'destroyPhoto']);

Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class);

Hope this will give you a hint to point the issue you might come up like this mostly when we are new and learning and developing new things!

Happy Learnings

Categories
Blog Learning Learning

Picture tag in HTML

The <picture> tag in HTML is a semantic element that is used to define multiple source images for a single content. The <picture> element is used to specify multiple sources for an image, allowing the browser to choose the most appropriate source based on the user’s device and screen size. This allows you to display images that are optimized for different devices, without having to rely on JavaScript or CSS media queries.

Here’s an example of how you might use the <picture> tag:

<picture >
  < source srcset="large.jpg" media="(min-width: 800px)">
  < source srcset="small.jpg" media="(max-width: 799px)">
  < img src="small.jpg" alt="A picture">
</ picture >

In this example, the < source > elements define different sources for the image, based on the screen size of the user’s device. If the screen is at least 800 pixels wide, the browser will choose the large.jpg image, while if the screen is smaller than 800 pixels, it will choose the small.jpg image. The <img> element is used as a fallback for browsers that do not support the <picture> element.

hope you understand the basic concepts and use of Picture Tag in HTML

Source: AO Interaction Channel

Categories
Learning

How to use “where” with “pluck” in laravel?

Hello,

Here is the quick solution:

$categoryId = ProductCategory::where('id',$id)->pluck('categoryId')[0];
$parentId = ProductCategory::where('id',$id)->pluck('parentId')[0];
        
print_r($categoryId);
print_r($parentId);

Plucking it array index 0 as the return from pluck is array based so indexing gives us the value for the particular column you need to pluck from table.

Hope this will give you an idea or solution to your problem.

Happy Learning, Happy Learning Laravel!

Categories
Javascript Learning Tech

How to filter customers state array based on set of array of ids in javascript/reactjs.

Filtering customers state array based on array of ids in javascscript/react.

const activeCustomerIdSet = [3,4,9];

//customers is array of customer data in my case its array value is bit different, just to note.

const filteredActiveCustomersIds = Array.from(activeCustomerIdSet) || [];
            let nonActiveCustomers = [];
            let filterCustomer = [...customers];
            if (filteredActiveCustomersIds.length) {
                for (let cid of filteredActiveCustomersIds) {
                    filterCustomer = filterCustomer?.filter(cust => {
                        if (+cust?.value?.id !== cid) {
                            
                            return cust;
                        }
                    });
                }
                nonActiveCustomers = [...nonActiveCustomers,
                    filterCustomer];
            }

            console.log({  filteredActiveCustomersIds, customers, nonActiveCustomers });

Hope you find useful in your search!

Keeping it short simple and straight.

Happy coding!

Categories
Javascript Learning Learning Tech

How I have resolve, Module not found, Can’t resolve ‘optimism’

Hello welcome to this post.

Straight to the answer, here it goes:

Tried running first nextjs app

λ npm run dev

> developfe-dev@1.0.0 dev
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from F:\windows\developapp\code\.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./node_modules/@apollo/client/cache/core/cache.js:1:0
Module not found: Can't resolve 'optimism'

Import trace for requested module:
./node_modules\@apollo\client\cache\index.js
./node_modules\@apollo\client\core\index.js
./node_modules\@apollo\client\index.js
./pages\_app.js

https://nextjs.org/docs/messages/module-not-found
Terminate batch job (Y/N)?
^C

Next reinstalled package



F:\windows\developapp\code (main -> origin) (developfe-dev@1.0.0)
λ npm i @apollo/client@latest --save

added 9 packages, changed 1 package, and audited 1119 packages in 13s

90 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (4 low, 2 high)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Then run again! boom!

F:\windows\developapp\code (main -> origin) (developfe-dev@1.0.0)
λ npm run dev

> developfe-dev@1.0.0 dev
> next

ready – started server on 0.0.0.0:3000, url: http://localhost:3000
info – Loaded env from F:\windows\developapp\code\.env
info – Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event – compiled successfully

So, here is the simple answer to the question.

Thanks for reading and Happy Learning!