Next js 14 tutoriel – La navigation entre les pages PART 1

Next.js is a popular open-source JavaScript framework that allows you to build server-side rendered React applications easily. In this tutorial, we will focus on navigation between pages in a Next.js application.

Creating Pages in Next.js

In Next.js, each page is a React component. To create a new page, simply create a new JavaScript file inside the pages directory. For example, let’s create a new page called About.js:

        
            import React from 'react';

            const About = () => {
                return (
                    

                        
About Page
                        
This is the about page content.
                    
                );
            }

            export default About;
        
    

Linking Between Pages

To navigate between pages in a Next.js application, you can use the Link component provided by Next.js. This component allows you to create anchor tags that will navigate to the specified page without reloading the entire application.

Here’s how you can link to the about page from the home page:

        
            import Link from 'next/link';

            const Home = () => {
                return (
                    

                        
Home Page
                        
                            About Page
                        
                    
                );
            }

            export default Home;
        
    

When the user clicks on the “About Page” link, they will be taken to the About page without a full page reload.

Conclusion

In this tutorial, we have learned how to create pages and navigate between them in a Next.js application. In the next part of this tutorial, we will explore more advanced navigation techniques and features provided by Next.js.