Next.js Codebase Analysis <> create-next-app <> create-app.ts explained - Part 1.19
Tags: nextjs, react, webdev, opensource
Published: 2024-02-14 22:35:57

In the [previous article](https://medium.com/@ramu.narasinga_61050/next-js-codebase-analysis-create-next-app-index-ts-explained-part-1-18-e4a570ac9131), I provided insights about ternary operation and a type used in [create-app.ts](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/create-app.ts)

> Looking to practice and elevate your frontend skills? checkout https://tthroo.com for SaaS project based tutorials.

Let’s understand more lines of code from create-app.ts

```
// if you have passed --example in your CLI to create-next-app
// this example flag becomes true
if (example) {
    let repoUrl: URL | undefined
    
    // constructs a url
    // You can read more about it here
    // https://nodejs.org/api/url.html
    try {
      repoUrl = new URL(example)
    } catch (error: unknown) {
      // This block is straight forward
      const err = error as Error & { code: string | undefined }
      if (err.code !== 'ERR_INVALID_URL') {
        console.error(error)
        process.exit(1)
      }
    }

    if (repoUrl) {
      // Now it makes sense why an URL object is created
      // to gain access to help functions such origin like below
      // Worth noting this is how URLs should be validated
      if (repoUrl.origin !== 'https://github.com') {
        console.error(
          `Invalid URL: ${red(
            `"${example}"`
          )}. Only GitHub repositories are supported. Please use a GitHub URL and try again.`
        )
        process.exit(1)
      }

      // repoInfo is variable declared at the beginning of function
      // createApp.
      // I am interested to find out more about getRepoInfo
      // Without looking at the function definition
      // It is obvious that it gets the repository information
      // Looking at function names, you should be able to tell what it does
      // otherwise, you are naming them wrong 
      repoInfo = await getRepoInfo(repoUrl, examplePath) 
```

## getRepoInfo

```
export async function getRepoInfo(
  url: URL,
  examplePath?: string
): Promise<RepoInfo | undefined> {
  const [, username, name, t, _branch, ...file] = url.pathname.split('/')
  const filePath = examplePath ? examplePath.replace(/^\//, '') : file.join('/')

  if (
    // Support repos whose entire purpose is to be a Next.js example, e.g.
    // https://github.com/:username/:my-cool-nextjs-example-repo-name.
    t === undefined ||
    // Support GitHub URL that ends with a trailing slash, e.g.
    // https://github.com/:username/:my-cool-nextjs-example-repo-name/
    // In this case "t" will be an empty string while the next part "_branch" will be undefined
    (t === '' && _branch === undefined)
  ) {
    try {
      const infoResponse = await fetch(
        `https://api.github.com/repos/${username}/${name}`
      )
      if (infoResponse.status !== 200) {
        return
      }

      const info = await infoResponse.json()
      return { username, name, branch: info['default_branch'], filePath }
    } catch {
      return
    }
  }

  // If examplePath is available, the branch name takes the entire path
  const branch = examplePath
    ? `${_branch}/${file.join('/')}`.replace(new RegExp(`/${filePath}|/$`), '')
    : _branch

  if (username && name && branch && t === 'tree') {
    return { username, name, branch, filePath }
  }
}
```
The above code snippet is picked from helper function in a file named [examples.ts](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/examples.ts). This file name makes sense because this function deals with URL passed as part of — example option that should point to Github.

Up next, I will explain with log what the following code has:

```
const [, username, name, t, _branch, ...file] = url.pathname.split('/')
```
Because it caught my interest.

## Conclusion:
After moving past few lines that deal with example option, a new helper function named getRepoInfo is discovered and is located in [helpers/examples.ts](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/examples.ts). Why should it be in this file? — example option directly deals with links pointing to Github repo, so it makes perfect sense to be place this function inside example.ts file.

Convert a url string to URL object in Nodejs to access the prototype functions such as origin, host etc.,

Looking to practice and elevate your frontend skills? checkout https://tthroo.com for SaaS project based tutorials.