setup, the brand new /app folder, and routing system – Js Craft

NextJs 13 comes with a fantastic set of new options. One of many main additions is the brand new /app folder as the foundation folder for the pages of our app. This determines additionally modifications to the NextJs routing conventions.

The plan for this text is to construct a easy retailer app with the next URL construction:

/              -> factors to a fundamental static Index web page
/merchandise      -> factors to a fundamental root static Merchandise web page
/merchandise/_id_ -> factors to a parameterized product web page
/about         -> factors to a static About web page

On this article we’ll cowl the next:

• organising a NextJs 13 undertaking from scratch
• utilizing the /app folder to serve static pages
• utilizing question params in NextJs 13

Let’s begin studying!

Establishing a NextJs 13 undertaking from scratch

Earlier than we begin the precise coding might want to arrange the undertaking.

Will begin from scratch by creating an empty folder namednext13-jscraft-first. Inside this folder will first run the npm init -y command to create the package deal.json file.

Subsequent, we might want to set up the minimal required dependencies:

npm set up subsequent@newest react@newest react-dom@newest eslint-config-next@newest 

Provided that NextJs 13 continues to be experimental might want to create a subsequent.config.js file within the root of the out undertaking with the next content material:

/**
 * @kind {import('subsequent').NextConfig}
 */
module.exports = {
    experimental:{
        appDir: true
    }
}

Lastly, open the package deal.json and within the scripts part add the beneath strains:

"construct": "subsequent construct",
"begin": "subsequent begin",
"dev": "subsequent"

Utilizing the /app folder to serve static pages

Earlier than, we are able to see the primary web page of our new NextJs 13 undertaking might want to create the /app folder on the root of our undertaking.

The /app folder comes as a alternative for the /pages folder. For the second, we are able to nonetheless use each of them in order that we are able to have a smother improve to NextJs 13.

To outline the principle index web page of our retailer app we’ll add a /app/web page.js file.

At this level, our app ought to have the next recordsdata and folders:

/node_modules
/app
    web page.js
subsequent.config.js
package deal.json

In NextJs 13 web page.js is a reserved filename and maps to the default entry web page of a folder. Now, we are able to put different issues in a subfolder of /app, not simply javascript pages. We are able to add kinds, subcomponents, or assessments. NextJs wants this reserved web page.js title to know what file to load first from a given folder.

For our /app/web page.js we’ll simply add a easy heading:

/* /app/web page.js */
export default operate Index() {
    return (
        <h1>🏡 The House Web page</h1>
    )
}

With all of this in place, if we now run npm run dev we’ll see the beneath web page up and operating at http://localhost:3000/:

After we first run npm run dev you will notice that two new gadgets have been added to our undertaking folder:

• a brand new autogenerated app/structure.js file. Because the title implies it accommodates the structure description for our app. It replaces /pages/_app.js and /pages/_document.js recordsdata from the older variations of NextJs
• the .subsequent folder accommodates the construct recordsdata (this was additionally current within the older Nexjs variations)

To be able to add a second web page to our app we’ll create a brand new folder app/about. We’ll want an entry level for this folder, which means that we might want to add a web page.js file. The content material of app/about/web page.js can be:

/* /app/about/web page.js  */
export default operate Index() {
    return (
        <h1>🏡 The About web page</h1>
    )
}

Now, if we go to http://localhost:3000/about we’ll see the newly created web page:

Utilizing question params in NextJs 13

To this point, so good! However we have now simply used plain previous static pages. What if we need to have URLs with the next format:

http://localhost:3000/merchandise/1
http://localhost:3000/merchandise/2
....
http://localhost:3000/merchandise/1000

To be able to add a question param to a route the conference is to create a brand new folder and wrap that question param title in sq. brackets.

We’ll title our question param id. So, we’ll create a brand new subfolder of /app referred to as /merchandise. And within /app/merchandise, we’ll add a [id] subfolder containing the web page.js file:

/* /app/merchandise/[id]/web page.js */
export default operate ProductWithId({ params }) {
return (<h1>📦 Particular person product with id: {params.id} </h1>
}

Having this new web page if we go to an URL like http://localhost:3000/merchandise/123 we’ll see this output:

Needless to say we are able to nonetheless add a web page.js within the root of our app/merchandise folder:

/* /app/merchandise/web page.js */
export default operate ProductIndex() {
    return (
        <h1>🛒 Merchandise Web page</h1>
    )
}

And will probably be accessible on the root of http://localhost:3000/merchandise:

If it’s essential create hyperlinks between these pages you may nonetheless use the Hyperlink element as earlier than Subsequent 13.

You may see the total code right here

I hope you’ve got loved this text and if you need to get extra articles about React and frontend improvement you may all the time join my e-mail record.