Next.js Flashcards
Next.js config file
js. It allows you to modify and extend the default Next. js configuration. You can use this file to set up basic optimizations such as adding custom webpack configurations, enabling compression, defining environment variables, and more.
https://www.youtube.com/watch?v=ndTh5KOIRVQ
Where does most of the data you need live for any block reterned from a querry to your wordpress backend?
the attributes object
when you get returned data from a graphql querry to a wordpress site with guttenburg blocks, what data type are the blocks returned in?
an array iof you quyerry for the blocks of a page the retuned data will always be an array of blocks
explain how props is being passed from get staticprops to the home component even though the home compenent is never called:
import client from “client”;
import { gql } from ‘@apollo/client’;
import { BlockRenderer } from “components/BlockRenderer/BlockRenderer”;
import { cleanAndTransformBlocks } from ‘utils/cleanAndTransformBlocks’;
export default function Home(props) {
console.log(‘props’, props);
return <div>
<BlockRenderer blocks={props.blocks} />
</div>;
}
export const getStaticProps = async () => {
//graphql querry to my wordpress site
const { data } = await client.query({
//this is a querry that is asking for a specific page (node)
//of the specified uri (‘/’) which in this case is the homepage
//after getting the homepage it is asking for the page id and all
//the blocks on the page
query: gql
query MyQuery {
nodeByUri(uri: "/") {
... on Page {
id
blocks
}
}
}
})
return {
props: {blocks: cleanAndTransformBlocks(data.nodeByUri.blocks)
}
}
The process might seem a bit magical if you’re not familiar with Next.js and its conventions. Here’s a clearer explanation of how props are passed to the Home component without a direct call to getStaticProps from within the component itself:
Next.js’s Convention and Lifecycle
In Next.js, certain functions like getStaticProps and getServerSideProps are automatically recognized by the framework due to their specific naming conventions. These functions are part of Next.js’s data fetching strategies, allowing you to fetch data at build time (getStaticProps) or at request time (getServerSideProps).
How getStaticProps Works:
Automatic Invocation by Next.js: When you export a function named getStaticProps from a page in Next.js, the framework knows to automatically call this function during the build process for static generation or at request time in development mode. This function is not meant to be called manually inside your components.
Passing Props to the Page Component: The object returned by getStaticProps, specifically the props property of this object, is then passed as props to the default export of the file (in your case, the Home component). This is done automatically by Next.js; the developer does not need to manually pass these props.
Static Generation: For pages that use getStaticProps, Next.js generates a static HTML version of the page during the build process. The data returned by getStaticProps is used to render the page to HTML at build time. This pre-rendered page can then be served very quickly to users, improving performance and SEO.
Example Flow:
Build Time: During the build process, Next.js sees export const getStaticProps in your page component file and automatically executes this function.
Fetching Data: Inside getStaticProps, you fetch data (e.g., from a headless CMS, API, etc.) and prepare it as needed.
Returning Props: You return an object from getStaticProps with a props key containing the data you want to pass to the page component.
Automatic Props Passing: Next.js automatically provides these props to your page component (the Home function component, in your case).
Rendering the Page: The page component receives the props and uses them to render the page content. This content is then statically generated into HTML and served to clients.
In summary, the process of passing props to your Home component is handled automatically by Next.js based on the getStaticProps function’s existence and the structure of the object it returns. This convention allows developers to focus on the data fetching and rendering logic without worrying about the underlying mechanics of data passing.
import “../styles/globals.css”;
import { config } from “@fortawesome/fontawesome-svg-core”;
import “@fortawesome/fontawesome-svg-core/styles.css”;
config.autoAddCss = false;
function MyApp({ Component, pageProps }) {
return <Component {…pageProps} />;
}
export default MyApp;
Certainly! The App component (MyApp in your case) in a Next.js application is a special component that allows you to initialize pages. You can use it to apply layout, global CSS, and other global states across all pages in your Next.js app. Here’s what’s happening in your MyApp component file:
- Importing Global CSS
```javascript
import “../styles/globals.css”;
~~~
This line imports a global CSS file. This is the place where you would put global styles that apply to every page in your application. Next.js supports global CSS files, but they must be imported from_app.js(or_app.tsxif you’re using TypeScript). - Setting Up FontAwesome
```javascript
import { config } from “@fortawesome/fontawesome-svg-core”;
import “@fortawesome/fontawesome-svg-core/styles.css”;
config.autoAddCss = false;
~~~
These lines set up FontAwesome for use in your Next.js app. FontAwesome icons use CSS for styling. By default, FontAwesome tries to add its CSS directly to your document’s<head>to style the icons. However, Next.js controls the<head>to ensure optimal loading and to avoid flash of unstyled content (FOUC). Thus, you import the FontAwesome CSS manually ("@fortawesome/fontawesome-svg-core/styles.css") and tell FontAwesome not to automatically add its CSS (config.autoAddCss = false;). This setup prevents FOUC and allows you to control the loading of CSS styles manually. - The MyApp Component
```javascript
function MyApp({ Component, pageProps }) {
return <Component {…pageProps} />;
}
~~~
This function is your custom App component. Next.js uses it to initialize pages. The parametersComponentandpagePropsare important:
-
Component: This is the active page component. When navigating between pages, Next.js will change thisComponentto the new page’s component. -
pageProps: These are props that your page’sgetStaticPropsorgetServerSidePropsreturned. You can think of them as the initial props that your page component needs.
By rendering <Component {...pageProps} />, you’re essentially rendering the currently active page component and providing it with its necessary props. This setup allows you to wrap all your pages with additional components or logic, like global layouts or state providers, without modifying each page individually.
- Exporting MyApp
```javascript
export default MyApp;
~~~
Finally, you exportMyAppas the default export. Next.js automatically imports this file (_app.jsor_app.tsx) and uses it as the wrapper for all page components. This is why you’re able to apply global CSS and other global settings here.
In summary, your _app.js file is setting up global styles, configuring FontAwesome to properly work with Next.js’s handling of CSS, and ensuring that every page in your Next.js app is wrapped by the custom MyApp component, allowing for consistent behavior across your entire application.
How does appollo know what path to request wordpresses rest api?
you will create a .env.local file in the same directory as your appolo client.js file and corispond the correct variables with the correect url.
/** @type {import(‘next’).NextConfig} */
This line is a type annotation used in JavaScript to specify the type of the nextConfig object. This type annotation helps IDEs and type checkers understand the structure and expected properties of the object. Here, it specifies that nextConfig conforms to the NextConfig type, which is imported from the ‘next’ package. This helps in providing autocompletion and type checking based on the Next.js configuration API.
const nextConfig = {
reactStrictMode: true,
images: {
domains: [new URL(process.env.WP_IMAGES_URL).hostname]
},
};
reactStrictMode: true: This enables React’s Strict Mode for all components. Strict Mode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants, such as detecting unexpected side effects, legacy API usage, and more.
images: This section configures settings related to image optimization, an important feature in Next.js that allows for automatic image optimization.
domains: This is an array that specifies external domains from where images can be loaded and optimized by Next.js. This is useful when your images are hosted on external servers (like a CDN or separate media server).
what is apolo client?
JavaScript library that can be used with Next.js to manage data and state, and improve application performance
what does NEXT_PUBLIC_ prefix do to .env variables
this makes these variables accessable on the client side.
what does the .map() methoud do?
function in JavaScript is a method that iterates over an array and creates a new array by applying a provided function to each element of the original array.
what is getStaticPaths in next js?
When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
for more information see here:
https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths
what happens when you put [] around slug in a page folder in next
it makes the slug dynamic
